/* youngwoosuh.com — one stylesheet. Sizes in rem; the root size grows with the screen. */
:root{--bg:#fff;--fg:#111;--muted:#6f6f6f;--rule:#e9e9e9;--green:#2f9e5a}
@media (prefers-color-scheme:dark){:root{--bg:#0e0e0e;--fg:#ededed;--muted:#8c8c8c;--rule:#242424}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;font-size:clamp(16px,0.55vw + 9px,21px)}
body{margin:0;background:var(--bg);color:var(--fg);font:1rem/1.7 -apple-system,BlinkMacSystemFont,"Inter","Segoe UI","Apple SD Gothic Neo","Noto Sans KR",sans-serif}
a{color:var(--fg);text-decoration:none;border-bottom:1px solid var(--rule)}
a:hover{border-color:var(--fg)}
p{text-wrap:pretty}
.mono,h2,.d,.s{font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace}

/* layout */
.wrap{max-width:80rem;margin:0 auto;padding:4.5rem 2.5rem 6rem;display:grid;grid-template-columns:16rem minmax(0,46rem);justify-content:center;column-gap:clamp(3rem,6vw,7rem)}
main{max-width:46rem;min-width:0}
aside{position:sticky;top:4.5rem;align-self:start}

/* sidebar */
aside h1{font-size:2.1rem;line-height:1.08;font-weight:700;letter-spacing:-.025em;margin:0 0 2rem}
aside h1 a{border:0}
aside nav a{display:block;border:0;color:var(--muted);font-size:1.05rem;padding:.15rem 0}
aside nav a:hover,aside nav a.here{color:var(--fg)}
.contact{margin-top:2rem;padding-top:1.4rem;border-top:1px solid var(--rule)}
.contact h2{margin:0 0 .8rem}
.icons{display:flex;gap:1rem;align-items:center}
.icons a{border:0;color:var(--muted);display:inline-flex;transition:color .15s ease-out}
.icons a:hover{color:var(--fg)}
.icons svg{width:1.15rem;height:1.15rem;fill:currentColor}

/* sections */
section{margin-bottom:3.5rem}
h2{font-size:.75rem;font-weight:400;color:var(--muted);text-transform:uppercase;letter-spacing:.07em;margin:0 0 1rem}
.lead{font-size:1.1rem;line-height:1.6;margin:0 0 1rem}

/* home: hello */
.hello{display:grid;grid-template-columns:11rem 1fr;gap:2rem;align-items:center;margin-bottom:2.5rem}
.hello img{width:11rem;height:11rem;object-fit:cover;border-radius:1rem;display:block}
.hello h1{font-size:2rem;font-weight:600;letter-spacing:-.015em;margin:0}

/* home: logo timeline */
.path2 h2{margin-bottom:.8rem}
.tl{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin:0 0 2rem}
.tl:last-child{margin-bottom:0}
.tl::before{content:"";position:absolute;left:1.9rem;right:calc(25% - 1.9rem);top:1.9rem;height:1px;background:var(--rule)}
.tl a{position:relative;border:0;display:flex;flex-direction:column;gap:.6rem;color:var(--muted);font-size:.8rem;line-height:1.35;white-space:nowrap}
.tl .logo{width:3.8rem;height:3.8rem;border-radius:.95rem;background:#fff;border:1px solid var(--rule);display:grid;place-items:center;overflow:hidden;transition:transform .15s ease-out}
.tl .logo img{max-width:2.9rem;max-height:2.4rem;object-fit:contain}
.tl .logo.full img{width:3.8rem;height:3.8rem;max-width:none;max-height:none;object-fit:cover}
.tl .logo img[src*="bu.png"]{max-width:2.6rem;max-height:2.6rem;border-radius:.4rem}
.tl .logo img[src*="cad-sq"]{max-width:3rem;max-height:2.6rem}
.tl a:hover .logo{transform:translateY(-2px)}
.tl .now{color:var(--fg)}
.tl .now .logo{box-shadow:0 0 0 2px var(--bg),0 0 0 3px var(--green)}

/* home: essay */
.essay p{font-size:1.06rem;line-height:1.8;margin:0 0 1.3rem}
.essay strong{font-weight:600}

/* home: nutshell */
.truths{border-top:1px solid var(--rule)}
.truths details{border-bottom:1px solid var(--rule)}
.truths summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:1fr auto;gap:1rem;padding:1rem 0;font-size:1.06rem}
.truths summary::-webkit-details-marker{display:none}
.truths summary::after{content:"+";font-family:ui-monospace,"SF Mono",Menlo,monospace;color:var(--muted);transition:transform .2s ease-out}
.truths details[open] summary::after{transform:rotate(45deg)}
.truths .body{padding:0 2rem 1.1rem 0;color:var(--muted)}
.truths .body p{font-size:1rem;line-height:1.75;margin:0 0 .8rem}
.truths details[open] .body{animation:reveal .2s ease-out}
@keyframes reveal{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}

/* writing list */
.rows{list-style:none;padding:0;margin:0;border-top:1px solid var(--rule)}
.rows li{display:grid;grid-template-columns:5rem 1fr auto;gap:1rem;padding:.8rem 0;border-bottom:1px solid var(--rule);align-items:baseline}
.rows li>a{justify-self:start;font-size:1.06rem}
.d,.s,.count{color:var(--muted);font-size:.8rem}

/* post */
article .meta{color:var(--muted);font-size:.8rem;margin:0 0 1rem}
article .meta a{border:0;color:inherit}
article h1{font-size:2.1rem;line-height:1.25;font-weight:700;letter-spacing:-.015em;margin:0 0 .6rem}
article .sub{color:var(--muted);font-size:1.1rem;line-height:1.6;margin:0 0 2.5rem}
article .sub span{display:block}
.post-body p,.post-body li{font-size:1.06rem;line-height:1.85}
.post-body p{margin:0 0 1.3rem}
.post-body ul{margin:0 0 1.3rem;padding-left:1.3rem}
.post-body strong{font-weight:600}
article[lang="ko"]{word-break:keep-all;overflow-wrap:break-word}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* phones & small tablets */
@media (max-width:52rem){
  html{font-size:16px}
  .wrap{grid-template-columns:1fr;padding:2.5rem 1.25rem 4rem;row-gap:2.5rem}
  aside{position:static}
  aside h1{font-size:1.9rem;margin-bottom:1rem}
  aside nav{display:flex;gap:1.25rem}
  .contact{margin-top:1rem;padding-top:1rem}
  .icons{gap:.5rem;margin-left:-.6rem}.icons a{padding:.6rem}.icons svg{width:1.25rem;height:1.25rem}
  .hello{grid-template-columns:1fr;gap:1rem}.hello img{width:8rem;height:8rem}.hello h1{font-size:1.7rem}
  .tl{grid-template-columns:repeat(2,1fr);row-gap:1.4rem}.tl::before{display:none}
  .rows li{grid-template-columns:3.5rem 1fr auto}
  article h1{font-size:1.7rem}
}