:root {
  --color-bg: #f5ead8;
  --color-surface: #ebddc5;
  --color-text: #201e1d;
  --color-accent: #c67139;
  --color-accent-2: #7a8a5e;
  --color-divider: color-mix(in srgb, #201e1d 16%, transparent);

  /* Tonal ramps — generated in OKLCH on one shared lightness scale, so the
     same step of any role matches the others in visual value. */
  --color-neutral-100: #f9f4ed;
  --color-neutral-200: #eee7db;
  --color-neutral-300: #dcd3c4;
  --color-neutral-400: #c0b6a5;
  --color-neutral-500: #a19786;
  --color-neutral-600: #82796a;
  --color-neutral-700: #645c50;
  --color-neutral-800: #474238;
  --color-neutral-900: #2e2b25;

  --color-accent-100: #fff2eb;
  --color-accent-200: #ffe1d0;
  --color-accent-300: #ffc6a5;
  --color-accent-400: #f6a06b;
  --color-accent-500: #d67f48;
  --color-accent-600: #b2622d;
  --color-accent-700: #8c491a;
  --color-accent-800: #643312;
  --color-accent-900: #402310;

  --color-accent-2-100: #f0fae1;
  --color-accent-2-200: #e1eecc;
  --color-accent-2-300: #ccdbb2;
  --color-accent-2-400: #aebf92;
  --color-accent-2-500: #8fa073;
  --color-accent-2-600: #728157;
  --color-accent-2-700: #56633f;
  --color-accent-2-800: #3d472b;
  --color-accent-2-900: #272e1b;

  --font-heading: "Caprasimo", system-ui, sans-serif;
  --font-heading-weight: 400;
  --font-body: "Figtree", system-ui, sans-serif;

  --space-1: 4.4px;
  --space-2: 8.8px;
  --space-3: 13.2px;
  --space-4: 17.6px;
  --space-6: 26.4px;
  --space-8: 35.2px;

  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 28px;

  /* Elevation — derived from the ground: soft ink-tinted shadows on a
     light theme, a hairline edge + ambient darkness on a dark one. */
  --shadow-sm: 0 1px 2px color-mix(in srgb, #2e2b25 14%, transparent);
  --shadow-md: 0 3px 10px color-mix(in srgb, #2e2b25 16%, transparent);
  --shadow-lg: 0 12px 32px color-mix(in srgb, #2e2b25 22%, transparent);
}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--color-bg);color:var(--color-text);font-family:var(--font-body);font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--font-heading);font-weight:400;letter-spacing:-0.015em;line-height:1.12;margin:0}
img{display:block;width:100%;height:100%;object-fit:cover}
figure{margin:0}
a{color:var(--color-accent-700)}a:hover{color:var(--color-accent-600)}
:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}
::selection{background:color-mix(in srgb,var(--color-accent) 30%,transparent)}
.washed{filter:saturate(.6) contrast(.85) brightness(1.1) opacity(.94);overflow:hidden;background:var(--color-surface)}
.wrap{max-width:1180px;margin:0 auto;padding-inline:clamp(20px,5vw,56px)}
.top{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding-block:clamp(18px,3vw,32px)}
.brand{font-family:var(--font-heading);font-size:20px;color:var(--color-text);text-decoration:none;margin-right:auto}
.btn{display:inline-flex;align-items:center;font-family:var(--font-heading);font-size:14px;color:var(--color-text);text-decoration:none;padding:8.8px 16px;border:1px solid var(--color-divider);border-radius:999px}
.btn:hover{color:var(--color-text);background:color-mix(in srgb,var(--color-text) 7%,transparent)}
.hand{font-family:'Nanum Pen Script',cursive;line-height:1.1;color:var(--color-accent-700)}
.tilt{transform:rotate(-1.5deg);transform-origin:left}
.sig{font-family:'Nanum Pen Script',cursive;font-size:44px;line-height:1}
.lnk{color:var(--color-accent-700);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}
.lnk-xl{text-decoration-thickness:4px;text-underline-offset:8px}
.tag{display:inline-flex;font-size:11px;letter-spacing:.02em;padding:3px 10px;border-radius:999px}
.tag-accent{background:var(--color-accent-100);color:var(--color-accent-800)}
.tag-accent-2{background:var(--color-accent-2-100);color:var(--color-accent-2-800)}
.hero{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(32px,6vw,80px);padding:clamp(32px,6vw,72px) 0 clamp(56px,8vw,104px)}
.hero-text{flex:1 1 420px;min-width:0;max-width:640px}
.hero-title{font-size:clamp(44px,7.5vw,92px);line-height:.98;margin:0 0 28px;text-wrap:balance}
.intro{font-size:clamp(17px,1.6vw,20px);line-height:1.65;max-width:52ch;margin:0 0 24px;text-wrap:pretty}
.portrait{flex:0 1 340px;display:flex;flex-direction:column;gap:10px}
.circle{width:min(340px,78vw);aspect-ratio:1;border-radius:50%;box-shadow:var(--shadow-md)}
.timeline{max-width:880px;padding-bottom:96px}
.kicker{font-family:var(--font-body);font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--color-neutral-700);margin:0 0 32px}
.timeline ol{list-style:none;margin:0;padding:0}
.row{position:relative;display:grid;grid-template-columns:52px minmax(0,1fr);gap:clamp(16px,3vw,32px)}
.line{position:absolute;left:25px;top:56px;bottom:0;width:2px;border-radius:2px;background:var(--color-accent-2-300)}
.num{width:52px;height:52px;border-radius:50%;background:var(--color-accent-2-200);color:var(--color-accent-2-800);display:grid;place-items:center;font-family:var(--font-heading);font-size:17px}
.item{display:flex;flex-wrap:wrap;gap:20px 28px;align-items:flex-start;padding:4px 20px 48px;margin:-4px -20px 0;border-radius:var(--radius-lg);color:inherit;text-decoration:none}
.item:hover{background:var(--color-neutral-100);color:inherit}
.item-text{flex:1 1 320px;min-width:0;padding-top:12px}
.item h3{font-size:clamp(24px,3vw,32px);margin:14px 0 10px;text-wrap:balance}
.item p{font-size:16px;line-height:1.6;color:var(--color-neutral-800);margin:0 0 14px;max-width:56ch;text-wrap:pretty}
.meta{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--color-neutral-700)}
.read{margin-left:12px;font-family:var(--font-heading);color:var(--color-accent-700)}
.thumb{flex:0 0 auto;width:180px;height:140px;border-radius:var(--radius-lg);margin-top:12px}
.entry{padding-bottom:96px}
.back{display:inline-block;font-family:var(--font-heading);font-size:14px;text-decoration:none;margin:8px 0 clamp(24px,4vw,48px);padding:6px 8px;border-radius:999px}
.back:hover{background:color-mix(in srgb,var(--color-accent) 10%,transparent)}
.entry-head{max-width:820px;margin-bottom:clamp(28px,4vw,48px)}
.entry-meta{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:18px;font-size:14px;color:var(--color-neutral-700)}
.entry-head h1{font-size:clamp(40px,7vw,80px);line-height:1;margin:0 0 18px;text-wrap:balance}
.hero-img{margin:0 0 clamp(36px,5vw,64px)}
.hero-img .washed{width:100%;aspect-ratio:16/8;min-height:240px;border-radius:calc(var(--radius-lg)*1.4)}
.hero-img figcaption{font-size:24px;color:var(--color-neutral-700);margin:10px 0 0 24px}
.body{max-width:680px;font-size:clamp(18px,1.7vw,20px);line-height:1.8}
.body p{margin:0 0 1.2em;text-wrap:pretty}
blockquote{margin:1.6em 0;padding:clamp(24px,4vw,40px);border-radius:calc(var(--radius-lg)*1.15);background:var(--color-accent-100);font-family:var(--font-heading);font-size:clamp(24px,3vw,32px);line-height:1.25;color:var(--color-accent-800);text-wrap:balance}
.pager{display:flex;flex-wrap:wrap;gap:16px;margin-top:clamp(56px,8vw,96px);max-width:820px}
.pager a{flex:1 1 260px;display:flex;flex-direction:column;gap:6px;padding:24px 28px;border-radius:calc(var(--radius-lg)*1.15);color:var(--color-text);text-decoration:none}
.pager small{font-size:13px;color:var(--color-neutral-700)}
.pager span{font-family:var(--font-heading);font-size:20px}
.prev{background:var(--color-surface)}.prev:hover{background:var(--color-neutral-300);color:var(--color-text)}
.next{background:var(--color-accent-2-200);text-align:right}.next small{color:var(--color-accent-2-800)}.next:hover{background:var(--color-accent-2-300);color:var(--color-text)}
.foot{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:baseline;padding-block:40px 56px;color:var(--color-neutral-700);font-size:13px}
.brand-sm{font-family:var(--font-heading);font-size:16px;color:var(--color-text);margin-right:auto}