/* 7 · Field Notes from Interlachen. Material: hairline-flat (1px rules, no UI shadows).
   One exception on purpose: books are physical objects and cast a ground shadow on their ledge.
   Radii 2 (plate, covers) · 6 (cards, controls) · 999 (nodes). Italic has two roles: the creed and plate captions. */
:root{
  --s0:#F4EFE4; --s1:#FAF7F0; --s2:#FFFDF8; --inset:#EBE4D4;
  --rule:#DCD3C0; --rule-2:#C4B89E;
  --ink:#1E2219; --ink-2:#5B5A4D; --ink-3:#7E7967;
  --o50:#FDF2E4; --o100:#FADFC1; --o200:#F4C089; --o300:#EDA056; --o500:#E2700A; --o700:#A64E07; --o900:#5A2C06;
  --g:#1F4D2E; --g-h:#163A22; --g-t:#DCE6D9; --g-ink:#F6F2E8;
  --err:#A3263A; --err-t:#F6E1E2; --ok:#4D7330;
  --ground:rgba(60,45,20,.34); --ground-2:rgba(60,45,20,.16);
  --photo:none; --scrim:rgba(30,34,25,.38);
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --s0:#151713; --s1:#1C1F19; --s2:#242820; --inset:#0F110D; --rule:#33372D; --rule-2:#4A4F40;
  --ink:#ECE6D8; --ink-2:#A9A392; --ink-3:#8A8571;
  --o50:#2A1B0C; --o100:#3E270F; --o200:#6A3D10; --o300:#A65A14; --o500:#F08A2E; --o700:#F7AE66; --o900:#FBD9B2;
  --g:#3F7E52; --g-h:#4C9061; --g-t:#1D2B20; --g-ink:#F6F2E8;
  --err:#E66F80; --err-t:#3A1A1F; --ok:#94BD6F;
  --ground:rgba(0,0,0,.6); --ground-2:rgba(0,0,0,.35);
  --photo:brightness(.9) contrast(1.02); --scrim:rgba(0,0,0,.55);
  color-scheme:dark;
}}
:root[data-theme="dark"]{
  --s0:#151713; --s1:#1C1F19; --s2:#242820; --inset:#0F110D; --rule:#33372D; --rule-2:#4A4F40;
  --ink:#ECE6D8; --ink-2:#A9A392; --ink-3:#8A8571;
  --o50:#2A1B0C; --o100:#3E270F; --o200:#6A3D10; --o300:#A65A14; --o500:#F08A2E; --o700:#F7AE66; --o900:#FBD9B2;
  --g:#3F7E52; --g-h:#4C9061; --g-t:#1D2B20; --g-ink:#F6F2E8;
  --err:#E66F80; --err-t:#3A1A1F; --ok:#94BD6F;
  --ground:rgba(0,0,0,.6); --ground-2:rgba(0,0,0,.35);
  --photo:brightness(.9) contrast(1.02); --scrim:rgba(0,0,0,.55);
  color-scheme:dark;
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--s0);scroll-behavior:smooth}
body{background:var(--s0);color:var(--ink);font:400 17.5px/28px Alegreya,Georgia,serif;font-variant-numeric:oldstyle-nums proportional-nums;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit}
.wrap{max-width:1440px;margin:0 auto;padding:0 64px}
.ui{font-family:"Alegreya Sans",system-ui,sans-serif}
.num{font-variant-numeric:lining-nums tabular-nums}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:none;box-shadow:0 0 0 2px var(--s0),0 0 0 4px var(--g);border-radius:6px}

/* ---------- header ---------- */
.top{display:flex;align-items:center;justify-content:space-between;height:76px;border-bottom:1px solid var(--rule)}
.mark{display:flex;align-items:baseline;gap:12px;text-decoration:none}
.mark b{font:500 22px/1 Alegreya,serif;letter-spacing:-.01em}
.mark i{font:italic 400 14.5px/1 Alegreya,serif;color:var(--ink-2)}
.nav{display:flex;align-items:center;gap:30px;font:500 14.5px/1 "Alegreya Sans",sans-serif;color:var(--ink-2)}
.nav a{text-decoration:none;padding:8px 0;background:linear-gradient(var(--ink),var(--ink)) 0 100%/0 1px no-repeat;transition:background-size .2s,color .15s}
@media (hover:hover){.nav a:hover{color:var(--ink);background-size:100% 1px}}
.theme{font:500 13px/1 "Alegreya Sans",sans-serif;color:var(--ink-2);background:none;border:1px solid var(--rule-2);border-radius:999px;height:32px;padding:0 13px 0 10px;display:inline-flex;align-items:center;gap:7px;cursor:pointer}
.theme svg{width:14px;height:14px}
@media (hover:hover){.theme:hover{color:var(--ink);border-color:var(--ink-2)}}

/* ---------- buttons ---------- */
.btn{font:500 15px/1 "Alegreya Sans",sans-serif;letter-spacing:.01em;height:46px;padding:0 20px;border-radius:6px;border:1px solid transparent;display:inline-flex;align-items:center;justify-content:center;gap:9px;cursor:pointer;white-space:nowrap;text-decoration:none;transition:background .15s,border-color .15s,transform .1s}
.btn:active{transform:scale(.97)}
.btn.p{background:var(--g);color:var(--g-ink)}
.btn.s{background:transparent;color:var(--ink);border-color:var(--rule-2)}
.btn.sm{height:36px;padding:0 13px;font-size:13.5px}
@media (hover:hover){.btn.p:hover{background:var(--g-h)}.btn.s:hover{background:var(--s1);border-color:var(--ink-2)}}
.btn[disabled]{cursor:default}
.btn .arr{font-family:"Alegreya Sans";transition:transform .2s}
@media (hover:hover){.btn:hover .arr{transform:translateX(2px)}}
.spin{width:13px;height:13px;border-radius:50%;border:1.5px solid currentColor;border-right-color:transparent;animation:sp .8s linear infinite}
@keyframes sp{to{transform:rotate(1turn)}}
.buy{display:flex;flex-wrap:wrap;gap:6px 16px;font:500 13.5px/20px "Alegreya Sans",sans-serif;color:var(--ink-2)}
.buy a{text-decoration:none;border-bottom:1px solid var(--rule-2);transition:border-color .15s,color .15s}
@media (hover:hover){.buy a:hover{color:var(--ink);border-color:var(--ink)}}
.buy .pr{font-variant-numeric:lining-nums tabular-nums;color:var(--ink)}

/* ---------- book object ---------- */
.book{position:relative;display:block;aspect-ratio:2/3;border-radius:2px 3px 3px 2px;text-decoration:none;flex:none}
.book img{width:100%;height:100%;object-fit:cover;border-radius:inherit;position:relative;z-index:1;filter:var(--photo)}
.book::before{content:"";position:absolute;inset:0;z-index:2;border-radius:inherit;pointer-events:none;
  background:linear-gradient(90deg,rgba(0,0,0,.28) 0,rgba(255,255,255,.18) 2.5%,rgba(0,0,0,.08) 5%,transparent 9%,transparent 96%,rgba(0,0,0,.14));
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.14)}
.book::after{content:"";position:absolute;left:4%;right:-2%;bottom:-6px;height:14px;z-index:0;border-radius:50%;
  background:radial-gradient(closest-side,var(--ground),transparent);filter:blur(2px)}
.book{box-shadow:1px 1px 0 var(--ground-2),3px 2px 6px -2px var(--ground-2);transition:transform .2s cubic-bezier(.4,0,.2,1)}
@media (hover:hover){a.book:hover{transform:translateY(-4px)}a.book:hover::after{opacity:.7}}
.ledge{height:10px;border-top:1px solid var(--rule-2);background:linear-gradient(var(--s1),var(--s0));position:relative}

/* ---------- hero ---------- */
.hero{display:grid;grid-template-columns:minmax(0,1fr) 440px;gap:64px;padding:36px 0 0}
.intro{display:flex;flex-direction:column;min-width:0}
.name{font:500 80px/77px Alegreya,serif;letter-spacing:-.018em}
.name .phd{font-weight:500;color:var(--ink-2)}
.creed{font:italic 400 26px/32px Alegreya,serif;margin-top:24px;max-width:21em}
.creed .rule{background:linear-gradient(var(--o500),var(--o500)) 0 100%/var(--creed,100%) 2px no-repeat;padding-bottom:2px}
.lede{margin-top:16px;max-width:33em;color:var(--ink)}
.acts{display:flex;gap:12px;align-items:center;margin-top:24px;flex-wrap:wrap}
.shelf{margin-top:auto;padding-top:40px}
.shelf-row{display:flex;gap:19px;align-items:flex-end;padding:0 2px}
.shelf-row .book{width:120px}
.shelf-cap{display:flex;justify-content:space-between;margin-top:10px;font:500 12.5px/18px "Alegreya Sans",sans-serif;color:var(--ink-2)}
.shelf-cap a{text-decoration:none;color:var(--ink)}
.plate{border:1px solid var(--rule-2);border-radius:2px;padding:10px;background:var(--s1);align-self:end}
.plate img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:50% 30%;filter:var(--photo)}
.cap{display:flex;gap:10px;margin-top:9px;font:italic 400 14px/19px Alegreya,serif;color:var(--ink-2)}
.cap .short-c{display:none}
.cap .no{font-weight:500;color:var(--ink);white-space:nowrap}

/* ---------- section heads ---------- */
.sec{padding:112px 0 0}
#works{padding-top:88px}
.sh{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:32px;padding-bottom:20px;border-bottom:1px solid var(--rule);margin-bottom:48px}
.sh h2{font:500 46px/48px Alegreya,serif;letter-spacing:-.012em}
.sh p{font:500 14px/21px "Alegreya Sans",sans-serif;color:var(--ink-2);max-width:46em;text-align:right;text-wrap:balance}

/* ---------- the works ---------- */
.feat{display:grid;grid-template-columns:300px minmax(0,1fr) 340px;gap:56px;align-items:start}
.feat .book{width:300px}
.title{font:500 34px/38px Alegreya,serif;letter-spacing:-.008em}
.sub{font:500 15px/22px "Alegreya Sans",sans-serif;color:var(--ink-2);margin-top:6px}
.note{margin-top:18px;max-width:34em}
.first{margin-top:18px;padding-top:16px;border-top:1px solid var(--rule)}
.first small,.small-lab{display:block;font:500 12.5px/18px "Alegreya Sans",sans-serif;color:var(--ink-2);margin-bottom:4px}
.first q{quotes:"“" "”";font:400 19px/28px Alegreya,serif}
.wbtns{display:flex;gap:12px;align-items:center;margin-top:22px;flex-wrap:wrap}
.wbuy{margin-top:14px}
.revs{border-left:0;display:flex;flex-direction:column;gap:22px;padding-top:4px}
.rev{padding-top:16px;border-top:1px solid var(--rule)}
.rev p{font:400 17px/26px Alegreya,serif}
.rev cite{display:block;font:500 12.5px/18px "Alegreya Sans",sans-serif;color:var(--ink-2);font-style:normal;margin-top:8px}
.stars{color:var(--ink);letter-spacing:2px;font-size:12px}
.meet{font:500 13.5px/20px "Alegreya Sans",sans-serif;color:var(--ink-2);margin-top:14px}
.meet a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--rule-2)}

.trilogy{margin-top:104px;display:grid;grid-template-columns:300px minmax(0,1fr);gap:56px}
.tri-intro .title{font-size:30px;line-height:34px}
.tri-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px}
.tri-row .book{width:188px}
.tri-shelf{display:flex;gap:36px;align-items:flex-end}
.tri-shelf>div{flex:1}
.tri-col h3{font:500 20px/26px Alegreya,serif;margin-top:22px}
.tri-col .tease{font:500 13px/19px "Alegreya Sans",sans-serif;color:var(--ink-2);margin-top:2px}
.tri-col .first{margin-top:12px;padding-top:12px}
.tri-col .first q{font-size:16.5px;line-height:25px}
.tri-col .wbtns{margin-top:16px;gap:8px}
.tri-col .wbuy{margin-top:10px;font-size:13px}

.more{margin-top:104px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:56px}
.more-it{display:grid;grid-template-columns:150px minmax(0,1fr);gap:32px;align-items:end;padding-top:28px;border-top:1px solid var(--rule)}
.more-it .book{width:150px}
.more-it .title{font-size:26px;line-height:30px}
.more-it .note{font-size:16.5px;line-height:25px;margin-top:10px}
/* ---------- one world (the moment) ---------- */
.world{margin-top:0;background:var(--s1);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:88px 0 96px}
.world .sh{border-color:var(--rule-2)}
.tags{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.tag{background:none;border:0;border-right:1px solid var(--rule);text-align:left;padding:18px 24px 20px;cursor:pointer;color:var(--ink);position:relative;border-radius:0;transition:background .16s}
.tag:last-child{border-right:0}
.tag b{display:inline-block;font:500 26px/32px Alegreya,serif;background:linear-gradient(var(--o500),var(--o500)) 0 100%/var(--u,0%) 2px no-repeat;padding-bottom:3px}
.tag span{display:block;font:500 13.5px/20px "Alegreya Sans",sans-serif;color:var(--ink-2);margin-top:4px}
.tag .k{position:absolute;right:20px;top:22px;font:500 12px/1 "Alegreya Sans",sans-serif;color:var(--ink-3);border:1px solid var(--rule-2);border-radius:4px;padding:3px 6px}
@media (hover:hover){.tag:hover{background:var(--s2)}}
.tag[aria-pressed="true"]{background:var(--s2)}
.hint{font:500 13.5px/20px "Alegreya Sans",sans-serif;color:var(--ink-2);margin:20px 0 0;min-height:20px}
.hint b{color:var(--ink);font-weight:700}
.strip{position:relative;margin-top:28px;overflow:hidden;touch-action:pan-y;cursor:grab;user-select:none;-webkit-user-select:none}
.strip.drag{cursor:grabbing}
.track{position:relative;display:flex;gap:28px;align-items:flex-end;padding:8px 2px 0;width:max-content;min-width:100%;transition:transform .3s cubic-bezier(.4,0,.2,1)}
.w{width:132px;flex:none;position:relative;text-decoration:none;color:inherit}
.w .obj{transition:filter .24s,opacity .24s}
.w.dim .obj{filter:saturate(.3);opacity:.5}
.w .book{width:132px}
.chap{width:132px;aspect-ratio:2/3;background:var(--s2);border:1px solid var(--rule-2);border-radius:2px;display:flex;flex-direction:column;overflow:hidden;position:relative;box-shadow:1px 1px 0 var(--ground-2),3px 2px 6px -2px var(--ground-2)}
.chap img{width:100%;aspect-ratio:1;object-fit:cover;filter:var(--photo)}
.chap b{font:500 14px/17px Alegreya,serif;padding:8px 9px 0}
.chap small{font:500 11.5px/15px "Alegreya Sans",sans-serif;color:var(--ink-2);padding:3px 9px 0;margin-top:auto;padding-bottom:8px}
.chap.sealed,.chap.soon{justify-content:center;align-items:flex-start;padding:14px;gap:8px;background:var(--s1)}
.chap.soon{border-style:dashed}
.chap.sealed b,.chap.soon b{padding:0;font-size:16px;line-height:20px}
.chap.sealed small,.chap.soon small{padding:0;margin:0}
.wl{margin-top:24px;display:flex;flex-direction:column;align-items:center;gap:8px}
.node{width:22px;height:22px;border-radius:999px;background:var(--s1);border:1px solid var(--rule-2);display:grid;place-items:center;font:700 11px/1 "Alegreya Sans",sans-serif;color:transparent;position:relative;z-index:2;font-variant-numeric:lining-nums tabular-nums;transform:scale(.55);transition:transform .2s,background .2s,border-color .2s,color .2s}
.w.lit .node{transform:none;background:var(--o500);border-color:var(--o500);color:#fff}
.wl span{font:500 12px/16px "Alegreya Sans",sans-serif;color:var(--ink-2);text-align:center}
.w.dim .wl span{color:var(--ink-3)}
.trailsvg{position:absolute;left:0;top:0;pointer-events:none;overflow:visible;z-index:1}
.trailsvg path{fill:none;stroke:var(--o500);stroke-width:2.25;stroke-linecap:round}
.trailsvg .base{stroke:var(--rule-2);stroke-width:1;stroke-dasharray:2 5}
.start{margin-top:36px;display:grid;grid-template-columns:96px minmax(0,1fr) auto;gap:28px;align-items:center;background:var(--s2);border:1px solid var(--rule-2);border-radius:6px;padding:20px 24px;max-width:960px;opacity:0;transform:translateY(6px) scale(.98);transform-origin:20% 0;pointer-events:none;visibility:hidden}
.start.on{pointer-events:auto;visibility:visible}
.start .book{width:96px}
.start .lab{font:500 12.5px/18px "Alegreya Sans",sans-serif;color:var(--o700)}
.start h3{font:500 26px/30px Alegreya,serif;margin-top:2px}
.start p{font-size:16px;line-height:24px;color:var(--ink);margin-top:6px;max-width:36em}
.start .wbtns{margin-top:0;flex-direction:column;align-items:stretch;gap:8px}
.start .buy{justify-content:center}

/* ---------- stories ---------- */
.offer{display:grid;grid-template-columns:minmax(0,1fr) 460px;gap:56px;align-items:end;margin-bottom:44px}
.offer h3{font:500 30px/36px Alegreya,serif;max-width:20em}
.offer p{color:var(--ink-2);margin-top:8px;max-width:34em}
.form{display:flex;gap:10px;align-items:flex-start}
.f{flex:1}
.f label{display:block;font:500 12.5px/18px "Alegreya Sans",sans-serif;color:var(--ink-2);margin-bottom:5px}
.f input{width:100%;height:46px;border:1px solid var(--rule-2);border-radius:6px;background:var(--s2);color:var(--ink);font:400 16.5px Alegreya,serif;padding:0 12px;transition:border-color .15s,box-shadow .15s}
.f input:focus{outline:none;border-color:var(--g);box-shadow:0 0 0 3px var(--g-t)}
.f.bad input{border-color:var(--err);background:var(--err-t)}
.f .msg{font:500 12.5px/18px "Alegreya Sans",sans-serif;color:var(--err);margin-top:5px;min-height:18px}
.form .btn{margin-top:23px}
.done{font:500 14.5px/22px "Alegreya Sans",sans-serif;color:var(--ink);display:flex;gap:10px;align-items:flex-start}
.tick{width:20px;height:20px;flex:none;margin-top:1px}
.tick path{fill:none;stroke:var(--g);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:24;stroke-dashoffset:24;animation:draw .36s .05s cubic-bezier(.4,0,.2,1) forwards}
.tick circle{fill:none;stroke:var(--g);stroke-width:1.25}
@keyframes draw{to{stroke-dashoffset:0}}
.stories{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px}
.st{display:flex;flex-direction:column}
.st .art{border-radius:2px;overflow:hidden;aspect-ratio:3/2;background:var(--inset)}
.st .art img{width:100%;height:100%;object-fit:cover;filter:var(--photo)}
.st h3{font:500 21px/26px Alegreya,serif;margin-top:16px}
.st .cn{font:500 12.5px/18px "Alegreya Sans",sans-serif;color:var(--ink-2);margin-top:4px}
.st p{font-size:16px;line-height:24px;margin-top:10px}
.st .row{margin-top:auto;padding-top:18px;display:flex;align-items:center;justify-content:space-between;gap:10px}
.st .who{font:500 12.5px/18px "Alegreya Sans",sans-serif;color:var(--ink-2)}
.st.unlocked .btn{background:var(--g-t);color:var(--ink)}
.vault{margin-top:36px;padding-top:18px;border-top:1px solid var(--rule);display:flex;justify-content:space-between;gap:24px;font:500 13.5px/20px "Alegreya Sans",sans-serif;color:var(--ink-2)}
.vault a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--rule-2)}

/* ---------- naturalist ---------- */
.nat{display:grid;grid-template-columns:400px minmax(0,1fr);gap:72px;align-items:start}
.nat .plate{align-self:start}
.nat .plate img{aspect-ratio:41/42;object-position:50% 50%}
.nat .plate blockquote{font:italic 400 22px/29px Alegreya,serif;margin-top:16px;padding:14px 4px 4px;border-top:1px solid var(--rule)}
.bio{columns:2;column-gap:48px}
.bio p{break-inside:avoid;margin-bottom:18px}
.bio p:first-child::first-line{font-weight:500}
.pull{margin-top:28px;padding-top:24px;border-top:1px solid var(--rule);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:48px}
.pull p{font:500 21px/29px Alegreya,serif}
.pull small{display:block;font:500 12.5px/18px "Alegreya Sans",sans-serif;color:var(--ink-2);margin-top:8px}
.cred{margin-top:28px;font:500 13.5px/21px "Alegreya Sans",sans-serif;color:var(--ink-2)}

/* ---------- coming next ---------- */
.next{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px;position:relative}
.ms{border:1px dashed var(--rule-2);border-radius:6px;padding:22px 20px 20px;background:var(--s1);min-height:220px;display:flex;flex-direction:column}
.ms .st8{font:500 12.5px/18px "Alegreya Sans",sans-serif;color:var(--ink-2)}
.ms h3{font:500 22px/27px Alegreya,serif;margin-top:10px}
.ms h3 span{display:block;font-weight:400;color:var(--ink-2);font-size:17px;line-height:23px;margin-top:2px}
.ms p{font-size:15.5px;line-height:23px;margin-top:12px}
.notify{margin-top:40px;display:grid;grid-template-columns:minmax(0,1fr) 520px;gap:56px;align-items:end}
.notify h3{font:500 26px/32px Alegreya,serif}
.notify p{color:var(--ink-2);margin-top:6px}

/* ---------- footer ---------- */
.foot{margin-top:120px;border-top:1px solid var(--rule);padding:44px 0 56px}
.foot-g{display:grid;grid-template-columns:minmax(0,1.3fr) repeat(3,minmax(0,1fr));gap:40px}
.foot h4{font:500 13px/18px "Alegreya Sans",sans-serif;color:var(--ink-2);margin-bottom:10px}
.foot ul{list-style:none;font:500 15px/26px "Alegreya Sans",sans-serif}
.foot ul a{text-decoration:none;border-bottom:1px solid transparent}
@media (hover:hover){.foot ul a:hover{border-color:var(--ink)}}
.foot .reach{font:500 26px/32px Alegreya,serif;max-width:14em}
.foot .fine{margin-top:44px;padding-top:18px;border-top:1px solid var(--rule);display:flex;justify-content:space-between;gap:20px;font:500 12.5px/18px "Alegreya Sans",sans-serif;color:var(--ink-2)}

/* ---------- dialogs ---------- */
dialog{border:1px solid var(--rule-2);border-radius:6px;background:var(--s2);color:var(--ink);padding:0;max-width:calc(100vw - 32px);margin:auto}
dialog::backdrop{background:var(--scrim)}
dialog[open]{animation:pop .18s cubic-bezier(.2,.8,.2,1)}
@keyframes pop{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}
.dlg-h{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid var(--rule)}
.dlg-h b{font:500 13.5px/20px "Alegreya Sans",sans-serif;color:var(--ink-2)}
.x{width:32px;height:32px;border-radius:6px;border:0;background:none;color:var(--ink-2);cursor:pointer;font:400 22px/1 "Alegreya Sans";display:grid;place-items:center}
@media (hover:hover){.x:hover{background:var(--s1);color:var(--ink)}}
#pay{width:420px}
.pay-b{padding:20px}
.pay-it{display:grid;grid-template-columns:72px minmax(0,1fr) auto;gap:14px;align-items:center;padding-bottom:18px;border-bottom:1px solid var(--rule);margin-bottom:18px}
.pay-it img{width:72px;height:72px;object-fit:cover;border-radius:2px}
.pay-it b{font:500 19px/24px Alegreya,serif;display:block}
.pay-it small{font:500 12.5px/18px "Alegreya Sans",sans-serif;color:var(--ink-2)}
.pay-it .pr{font:500 20px/1 "Alegreya Sans";font-variant-numeric:lining-nums tabular-nums}
.pay-b .btn{width:100%;margin-top:14px}
.pay-fine{font:500 12px/17px "Alegreya Sans",sans-serif;color:var(--ink-2);margin-top:12px;text-align:center}
.pay-ok{text-align:center;padding:12px 0 4px}
.pay-ok .tick{width:44px;height:44px;margin:0 auto 12px}
.pay-ok h3{font:500 26px/32px Alegreya,serif}
.pay-ok p{font-size:16px;line-height:24px;color:var(--ink-2);margin-top:6px}
#reader{width:680px}
.rd-b{padding:28px 44px 8px;max-height:min(62vh,560px);overflow:auto}
.rd-b h3{font:500 15px/22px "Alegreya Sans",sans-serif;color:var(--ink-2)}
.rd-b h2{font:500 32px/38px Alegreya,serif;margin:4px 0 20px}
.rd-b p{font-size:18px;line-height:30px;text-indent:1.4em;margin:0}
.rd-b p:first-of-type{text-indent:0}
.rd-b p:first-of-type::first-letter{font:500 56px/48px Alegreya,serif;float:left;margin:4px 8px 0 0;color:var(--ink)}
.rd-f{padding:18px 44px 22px;border-top:1px solid var(--rule);display:flex;gap:16px;align-items:center;justify-content:space-between;flex-wrap:wrap}

/* ---------- phone ---------- */
@media (max-width:1180px){
  .wrap{padding:0 40px}
  .feat{grid-template-columns:240px minmax(0,1fr)}.feat .book{width:240px}.revs{grid-column:1/-1;flex-direction:row}.rev{flex:1}
  .trilogy{grid-template-columns:1fr;gap:28px}
  .tri-row .book{width:100%}
  .stories{grid-template-columns:repeat(2,minmax(0,1fr))}
  .next{grid-template-columns:repeat(2,minmax(0,1fr))}
  .nat{grid-template-columns:320px minmax(0,1fr);gap:48px}.bio{columns:1}
}
@media (max-width:760px){
  body{font-size:17px;line-height:27px}
  .wrap{padding:0 16px}
  .top{height:60px}
  .mark b{font-size:19px}.mark i{display:none}
  .nav a{display:none}
  .hero{grid-template-columns:1fr;gap:0;padding-top:16px}
  .plate{order:-1;padding:6px;align-self:stretch}
  .hero .plate img{aspect-ratio:3/2;object-position:50% 30%}
  .hero .cap{font-size:12.5px;line-height:16px;margin-top:5px}.hero .cap .long{display:none}.hero .cap .short-c{display:inline}
  .name{font-size:44px;line-height:44px;margin-top:18px}
  .creed{font-size:20px;line-height:26px;margin-top:12px}
  .lede{order:5;margin-top:22px}
  .acts{margin-top:18px}.acts .btn{flex:1}.acts .btn.s{display:none}
  .shelf{padding-top:22px;margin-top:0;margin-right:-16px;overflow-x:auto;scrollbar-width:none}
  .shelf::-webkit-scrollbar{display:none}
  .shelf-row{gap:14px;width:max-content;padding-right:16px}
  .shelf-row .book{width:96px}
  .shelf .ledge{width:calc(6*96px + 5*14px + 4px)}
  .shelf-cap{display:none}
  .sec{padding-top:80px}
  .sh{grid-template-columns:1fr;gap:8px;margin-bottom:32px}
  .sh h2{font-size:36px;line-height:40px}.sh p{text-align:left}
  .feat{grid-template-columns:1fr;gap:28px}.feat .book{width:200px}.revs{flex-direction:column}
  .title{font-size:30px;line-height:34px}
  .tri-row{grid-template-columns:1fr;gap:48px}
  .tri-row .book{width:150px}
  .tri-shelf{display:none}
  .tri-col .tri-cover{display:block!important}
  .more{grid-template-columns:1fr;gap:40px;margin-top:72px}
  .more-it{grid-template-columns:110px minmax(0,1fr);gap:20px}.more-it .book{width:110px}
  .world{padding:64px 0 72px}
  .tags{grid-template-columns:1fr}
  .tag{border-right:0;border-bottom:1px solid var(--rule);padding:14px 4px 14px}.tag:last-child{border-bottom:0}
  .tag b{font-size:23px;line-height:28px}.tag .k{display:none}
  .strip{margin-right:-16px}
  .w,.w .book,.chap{width:96px}
  .track{gap:18px}
  .chap b{font-size:12.5px;line-height:15px;padding:6px 7px 0}.chap small{font-size:10.5px;padding:2px 7px 6px}
  .chap.sealed,.chap.soon{padding:9px}.chap.sealed b,.chap.soon b{font-size:13.5px;line-height:17px}
  .start{grid-template-columns:72px minmax(0,1fr);gap:16px;padding:16px}
  .start .book{width:72px}.start h3{font-size:22px;line-height:27px}
  .start .wbtns{grid-column:1/-1}
  .offer{grid-template-columns:1fr;gap:24px}
  .offer h3{font-size:26px;line-height:32px}
  .form{flex-direction:column;align-items:stretch}.form .btn{margin-top:0}
  .stories{grid-template-columns:1fr;gap:40px}
  .vault{flex-direction:column}
  .nat{grid-template-columns:1fr;gap:40px}
  .pull{grid-template-columns:1fr;gap:24px}
  .next{grid-template-columns:1fr}.ms{min-height:0}
  .notify{grid-template-columns:1fr;gap:20px}
  .foot-g{grid-template-columns:1fr 1fr}.foot-g>div:first-child{grid-column:1/-1}
  .foot .fine{flex-direction:column}
  .rd-b{padding:22px 20px 8px}.rd-f{padding:16px 20px 18px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}.start{transition:opacity .2s!important}}
/* ===== gate round 1: the notebook made visible ===== */
:root{--sc:"Alegreya Sans SC","Alegreya Sans",sans-serif}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--s1:#1D201A;--s2:#262A22}}
:root[data-theme="dark"]{--s1:#1D201A;--s2:#262A22}

/* mark: a drawn field tag */
.mark{display:block;line-height:0}
.tagmark{width:176px;height:44px;overflow:visible}
.tagmark .tg{fill:var(--s1);stroke:var(--ink);stroke-width:1.1}
.tagmark .th{fill:var(--s0);stroke:var(--ink);stroke-width:1.1}
.tagmark .ts{fill:none;stroke:var(--ink-2);stroke-width:1}
.tagmark .t1{font:500 17px Alegreya,serif;fill:var(--ink);letter-spacing:-.01em}
.tagmark .t2{font:500 10.5px var(--sc);fill:var(--ink-2);letter-spacing:.04em}
.theme{border:0;border-radius:0;height:auto;padding:8px 0;font:500 14.5px/1 "Alegreya Sans",sans-serif;background:linear-gradient(var(--ink-2),var(--ink-2)) 0 100%/100% 1px no-repeat}

/* buttons: the page's own, squared like a label */
.btn{border-radius:2px;height:48px;padding:0 22px;letter-spacing:.015em}
.btn.sm{height:38px;padding:0 15px}
.btn.s{border:0;border-bottom:1px solid var(--ink);border-radius:0;padding:0 2px;height:auto;line-height:22px}
.btn.s.sm{height:auto}
@media (hover:hover){.btn.s:hover{background:none;border-color:var(--o500)}}
.wbtns{gap:22px}

/* section markers: a trail node + line into the rule */
.sh{grid-template-columns:auto minmax(0,1fr) auto;column-gap:18px;position:relative}
.snode{width:26px;height:26px;border-radius:999px;background:var(--o500);color:#fff;display:grid;place-items:center;font:700 12px/1 "Alegreya Sans",sans-serif;font-variant-numeric:lining-nums tabular-nums;align-self:center;position:relative}
.snode::after{content:"";position:absolute;left:12.5px;top:26px;width:1px;height:31px;background:var(--o500)}
.sh h2{letter-spacing:-.02em}

/* hero: the books lead, the person is Fig. 1 */
.hero{grid-template-columns:minmax(0,1fr) 300px;gap:24px 64px;padding-top:30px;align-items:start}
.name{font:500 80px/.95 Alegreya,serif;letter-spacing:-.02em;max-width:9.5em}
.name .phd{color:var(--ink);font-size:.6em;letter-spacing:-.01em}
.creed{margin-top:18px}
.lede{margin-top:12px}
.acts{margin-top:20px}
.hplate{align-self:start;padding:8px}
.hplate img{aspect-ratio:5/6;object-position:50% 26%}
.hplate .cap{font-size:13px;line-height:18px;margin-top:7px}
.shelf{grid-column:1/-1;padding-top:8px;margin-top:0}
.shelf-row{position:relative;display:flex;gap:28px;align-items:flex-end;padding:0}
.shelf-row::before{content:"";position:absolute;left:-8px;right:-8px;bottom:60px;border-top:1px solid var(--rule-2);height:9px;background:linear-gradient(var(--s1),transparent)}
.shelf-row::after{content:"";position:absolute;left:100px;width:960px;bottom:49px;height:2px;background:var(--o500)}
.sb{width:min-content;display:flex;flex-direction:column;align-items:center;text-decoration:none;color:var(--ink-2);position:relative;z-index:1}
.sb .book{width:160px}
.sb.lead .book{width:200px}
.sc{position:relative;z-index:3;height:60px;padding-top:26px;text-align:center;font:500 11.5px/16px var(--sc);letter-spacing:.03em;color:var(--ink-2)}
.sc .nd{position:absolute;left:50%;top:2px;transform:translateX(-50%);width:18px;height:18px;border-radius:999px;background:var(--o500);color:#fff;display:grid;place-items:center;font:700 10px/1 "Alegreya Sans",sans-serif;font-variant-numeric:lining-nums}
@media (hover:hover){.sb:hover .book{transform:translateY(-4px)}.sb:hover .sc{color:var(--ink)}}
.sb .book{transition:transform .2s cubic-bezier(.4,0,.2,1)}

.shelf-note{align-self:flex-end;margin:0 0 76px 8px;max-width:150px;font:500 13px/19px "Alegreya Sans",sans-serif;color:var(--ink-2)}
.shelf-note a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--ink)}
@media (max-width:1180px){.shelf-note{display:none}}
/* works: covers in hairline plates */
.wplate{border:1px solid var(--rule-2);border-radius:2px;padding:14px 14px 10px;background:var(--s1)}
.wplate .book{width:100%}
.feat{grid-template-columns:330px minmax(0,1fr) 320px}
.cap .no{font-style:italic}
.tri-cap{margin-top:12px}
.mcap{margin:0 0 4px}
.title{letter-spacing:-.012em}

/* specimen tags: tag-shaped, hanging on a string */
.tags{display:flex;flex-wrap:wrap;gap:22px 44px;border:0;padding:6px 0 0 30px}
.tag{flex:none;max-width:330px;border:1px solid var(--rule-2);border-left:0;border-radius:0 2px 2px 0;background:var(--s2);padding:14px 22px 15px 30px;margin-left:22px;transform:rotate(var(--r,0deg));transform-origin:0 50%;transition:transform .2s cubic-bezier(.4,0,.2,1),background .16s,border-color .16s}
.tag:nth-child(1){--r:-1.4deg}.tag:nth-child(2){--r:.9deg}.tag:nth-child(3){--r:-.6deg}
.tag .tip{position:absolute;right:100%;top:-1px;width:24px;height:calc(100% + 2px);overflow:visible;margin-right:-1px}
.tag .tip path{fill:var(--s2);stroke:var(--rule-2);stroke-width:1;vector-effect:non-scaling-stroke;transition:stroke .16s}
.tag[aria-pressed="true"] .tip path{stroke:var(--ink)}
@media (hover:hover){.tag:hover .tip path{stroke:var(--ink-2)}}
.tag .hole{position:absolute;left:-14px;top:50%;width:10px;height:10px;margin-top:-5px;border-radius:999px;border:1px solid var(--ink-2);background:var(--s1);transition:background .2s,border-color .2s}
.tag .str{position:absolute;right:calc(100% + 8px);top:50%;width:46px;height:30px;margin:-15px 0 0 0;overflow:visible;pointer-events:none}
.tag .str path{fill:none;stroke:var(--ink-2);stroke-width:1}
.tag b{font-size:25px;line-height:30px;background:none;padding:0}
.tag span.d{display:block;font:500 13.5px/20px "Alegreya Sans",sans-serif;color:var(--ink-2);margin-top:3px}
@media (hover:hover){.tag:hover{--r:0deg;background:var(--s2);border-color:var(--ink-2)}}
.tag[aria-pressed="true"]{--r:0deg;border-color:var(--ink)}
.tag[aria-pressed="true"] .hole{background:var(--o500);border-color:var(--o500)}
.wl span:last-child{font:500 11px/14px "Alegreya Sans",sans-serif;max-width:132px}
.start{opacity:1;visibility:visible;pointer-events:auto;border-radius:2px}

/* stories: field-note entries */
.notes{list-style:none;border-top:1px solid var(--rule-2)}
.fn{display:grid;grid-template-columns:180px minmax(0,1fr) 180px;gap:36px;align-items:start;padding:24px 0;border-bottom:1px solid var(--rule)}
.fn-art{border:1px solid var(--rule-2);padding:6px;background:var(--s1);border-radius:2px}
.fn-art img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;filter:var(--photo)}
.fn-d{font:500 12px/18px var(--sc);letter-spacing:.04em;color:var(--ink-2)}
.fn h3{font:500 25px/30px Alegreya,serif;letter-spacing:-.01em;margin-top:2px}
.fn-b>p:not(.fn-d):not(.fn-n){font-size:16.5px;line-height:25px;margin-top:8px;max-width:40em}
.fn-n{font:500 12.5px/18px "Alegreya Sans",sans-serif;color:var(--ink-2);margin-top:8px}
.fn-buy{justify-self:end;align-self:center;display:flex;align-items:baseline;gap:8px;text-decoration:none;font:500 14px/20px "Alegreya Sans",sans-serif;color:var(--ink);border-bottom:1px solid var(--ink);padding-bottom:2px;white-space:nowrap}
.fn-buy .pr{font:500 22px/1 Alegreya,serif;font-variant-numeric:lining-nums}
@media (hover:hover){.fn-buy:hover{border-color:var(--o500)}}

/* coming next: one dashed list on a rule */
.next{display:block;list-style:none;border-top:1px solid var(--rule-2)}
.next li{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr) 120px;gap:40px;align-items:baseline;padding:20px 0;border-bottom:1px dashed var(--rule-2)}
.next h3{font:500 22px/28px Alegreya,serif}
.next h3 span{display:block;font-weight:400;color:var(--ink-2);font-size:16.5px;line-height:23px}
.next p{font-size:16px;line-height:25px}
.next .st8{font:500 12px/18px var(--sc);letter-spacing:.04em;color:var(--ink-2);text-align:right}

@media (max-width:1180px){
  .hero{grid-template-columns:minmax(0,1fr) 240px}
  .sb .book{width:120px}.sb.lead .book{width:150px}.shelf-row{gap:18px}
  .shelf-row::after{left:75px;width:705px}
  .feat{grid-template-columns:260px minmax(0,1fr)}
}
@media (max-width:760px){
  .tagmark{width:150px;height:38px}
  .hero{grid-template-columns:1fr;gap:0}
  .name{font-size:46px;margin-top:0}
  .hplate{order:6;margin-top:28px;width:220px}
  .hplate img{aspect-ratio:5/6}
  .lede{order:5}
  .acts{order:4;margin-top:20px}.acts .btn{flex:1}
  .shelf{order:3;padding-top:22px;margin-right:-16px;overflow-x:auto;scrollbar-width:none}
  .shelf::-webkit-scrollbar{display:none}
  .shelf-row{gap:16px;width:max-content;padding:0 16px 0 0}
  .sb .book{width:104px}.sb.lead .book{width:132px}
  .shelf-row::before{left:0;right:16px}
  .shelf-row::after{left:66px;width:614px}
  .sc{font-size:10.5px}
  .snode{width:22px;height:22px;font-size:11px}.snode::after{display:none}
  .sh{grid-template-columns:auto minmax(0,1fr)}.sh p{grid-column:1/-1}
  .feat{grid-template-columns:1fr}.wplate{width:240px}
  .tags{padding-left:28px;gap:16px}
  .tag{max-width:none;width:calc(100% - 22px)}
  .fn{grid-template-columns:96px minmax(0,1fr);gap:16px}
  .fn-buy{grid-column:2;justify-self:start}
  .next li{grid-template-columns:1fr;gap:6px}.next .st8{text-align:left}
  .start{opacity:1}
}

/* ===== phase 4 build: production page + round-2 AD polish ===== */
.skip{position:absolute;left:16px;top:-60px;z-index:50;background:var(--g);color:var(--g-ink);font:500 14px/1 "Alegreya Sans",sans-serif;padding:12px 16px;border-radius:2px;text-decoration:none}
.skip:focus{top:12px}
main:focus,section[tabindex]:focus{outline:none;box-shadow:none}
.nw{white-space:nowrap}
.inl{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--rule-2)}
@media (hover:hover){.inl:hover{border-color:var(--ink)}}
.done:focus{outline:none;box-shadow:none}
.btn[disabled]{opacity:.85}

/* hero: portrait 200×240, caption under it; the covers outweigh the face (AD r2 #1) */
.hero{grid-template-columns:minmax(0,1fr) 200px;padding-top:28px}
.hplate{width:200px;padding:7px;justify-self:end}
.hplate img{width:184px;height:221px;aspect-ratio:auto;object-position:50% 24%}
.hplate .cap{font-size:12.5px;line-height:17px;flex-direction:column;gap:0}

/* works */
.tri-shelf .book{width:188px}
.tri-cover{display:none}
.own{margin-top:6px}

/* one world: static first, the moment makes it live */
.world{margin-top:112px}
.tag[disabled]{cursor:default;color:var(--ink)}
.strip{overflow-x:auto;overflow-y:hidden;scrollbar-width:none;cursor:auto;-webkit-overflow-scrolling:touch}
.strip::-webkit-scrollbar{display:none}
.track{transition:none}
.chap.soon{border-style:solid;border-color:color-mix(in srgb,var(--rule-2) 40%,transparent)}
.w:focus-visible{border-radius:2px}
/* detail card: fixed size, content cross-fades inside it (AD r2 #3) */
.start{display:grid;grid-template-columns:minmax(0,1fr);gap:0;width:min(1008px,100%);max-width:none;padding:0;transform:none;opacity:1;min-height:186px}
.start-in{grid-area:1/1;display:grid;grid-template-columns:96px minmax(0,1fr) 300px;gap:28px;align-items:center;padding:20px 24px;min-height:184px}
.start-in .wbtns{margin-top:0;flex-direction:column;align-items:stretch;gap:10px}
.start-in .buy{justify-content:center}
.start-in .book{width:96px}
.hint .replay{font:inherit;color:var(--ink);background:none;border:0;border-bottom:1px solid var(--ink);padding:0;cursor:pointer;border-radius:0}

/* stories: two hand-offs per entry */
.fn-go{justify-self:end;align-self:center;display:flex;flex-direction:column;align-items:flex-end;gap:10px}
.fn-go .fn-buy{justify-self:auto;align-self:auto}
.fn-shop{font:500 12.5px/18px "Alegreya Sans",sans-serif;color:var(--ink-2);text-decoration:none;border-bottom:1px solid var(--rule-2)}
@media (hover:hover){.fn-shop:hover{color:var(--ink);border-color:var(--ink)}}
.vault a{white-space:nowrap}

/* reader as a ruled notebook page with a margin */
#reader .rd-b{background:linear-gradient(90deg,transparent 30px,var(--rule) 30px,var(--rule) 31px,transparent 31px),repeating-linear-gradient(transparent 0 29px,color-mix(in srgb,var(--rule) 70%,transparent) 29px 30px);background-position:0 0,0 9px;background-attachment:local}
#reader .rd-b p{line-height:30px}

/* footer: two columns, the reach line the only big text */
.foot-g{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:56px}
.foot .reach{max-width:16em}
.foot .reach a{text-decoration:none;border-bottom:2px solid var(--ink)}
.foot-in{list-style:none;display:flex;flex-wrap:wrap;gap:4px 24px;margin-top:22px;font:500 15px/26px "Alegreya Sans",sans-serif}
.foot-in a{text-decoration:none;border-bottom:1px solid var(--rule-2)}
.foot-r{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px}
.foot-k{color:var(--ink-2);font-size:13px}

@media (max-width:1180px){
  .hero{grid-template-columns:minmax(0,1fr) 200px}
  .start-in{grid-template-columns:96px minmax(0,1fr) 260px}
}
@media (max-width:760px){
  .hero{grid-template-columns:1fr}
  .name{font-size:56px;line-height:.95}                 /* AD r2 #2: "Kay, PhD" never orphans */
  .hplate{justify-self:start;width:200px}
  .start{min-height:0;grid-template-columns:minmax(0,1fr);gap:0;padding:0}
  .start-in{grid-template-columns:72px minmax(0,1fr);gap:16px;padding:16px;min-height:0;align-content:start}
  .start-in .book{width:72px}.start-in h3{font-size:22px;line-height:27px}
  .start-in .wbtns{grid-column:1/-1}
  .strip{margin-right:-16px}.track{padding-right:16px}
  .fn-go{grid-column:2;justify-self:start;align-items:flex-start}
  .foot-g{grid-template-columns:1fr;gap:36px}
  .foot-g>div:first-child{grid-column:auto}
  .foot .reach{font-size:23px;line-height:29px}
}
@media (max-width:380px){.name{font-size:50px}}