/* Landform Research  -  Field Notes book
   The kit: white ground, ink black, data in mono, one blue accent,
   hairlines, sharp corners, no decoration. */

:root{
  --paper:#ffffff;
  --wash:#f6f6f4;
  --ink:#0c0c0d;
  --ink-70:#38383b;
  --grey:#6a6a6e;
  --faint:#a2a2a6;
  --hair:rgba(12,12,13,0.14);
  --hair-soft:rgba(12,12,13,0.08);
  --accent:#2b5cff;

  --head:"Inter",system-ui,-apple-system,sans-serif;
  --body:"Inter",system-ui,-apple-system,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,monospace;

  --cover-bg:#0c0c0d;
  --cover-ink:#ffffff;
  --page-bg:#ffffff;
  --desk:var(--wash);

  /* the coffee table */
  --table-a:#6e5843;
  --table-b:#64503c;
  --table-c:#5a4735;
}

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}
body{
  margin:0;
  overflow-x:hidden;
  font-family:var(--body);
  color:var(--ink);
  background:var(--desk);
  line-height:1.55;
}
a{color:inherit;text-decoration:none;}
img{display:block;max-width:100%;}

.mono{
  font-family:var(--mono);
  font-weight:500;
  font-size:11px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--faint);
}
.mono.ink{color:var(--ink);font-weight:600;}
.sq{width:13px;height:13px;background:var(--ink);flex:0 0 13px;}
.sq.accent{background:#8b8874;}

/* ---- top bar ---- */
.bar{
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:18px 40px;
  border-bottom:1px solid var(--hair-soft);
  background:var(--paper);
  position:relative;z-index:20;
}
.bar .mark{display:flex;align-items:center;gap:11px;font-weight:700;font-size:16px;letter-spacing:-0.02em;}
.bar .mark .sq{width:20px;height:20px;flex:0 0 20px;background:var(--ink);-webkit-mask:url("favicon.svg") center/contain no-repeat;mask:url("favicon.svg") center/contain no-repeat;}
.bar-right{display:flex;align-items:center;gap:22px;}

/* =========================================================
   SHELF
   ========================================================= */
.shelf-mast{padding:72px 40px 8px;max-width:1480px;margin:0 auto;}
.shelf-mast .kick{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--mono);font-size:11px;letter-spacing:0.16em;
  text-transform:uppercase;color:var(--ink);
}
.shelf-mast .kick::before{content:"";width:6px;height:6px;background:#8b8874;}
.shelf-mast h1{
  margin:26px 0 0;
  font-family:var(--head);font-weight:900;
  font-size:clamp(34px,6vw,84px);letter-spacing:-0.02em;line-height:1.02;
}
.shelf-mast .lede{margin:22px 0 0;max-width:64ch;color:var(--grey);font-size:17px;}

.shelf{
  max-width:1480px;margin:0 auto;
  padding:90px 40px 60px;
  display:flex;align-items:flex-end;gap:80px;
  border-bottom:1px solid var(--hair);
  position:relative;
}
.shelf::after{
  content:"";position:absolute;left:40px;right:40px;bottom:59px;
  height:1px;background:var(--hair);
}

/* ---- 3D volume ---- */
.vol{display:block;padding-bottom:60px;perspective:1400px;outline:none;}
.book3d{
  position:relative;
  width:292px;height:404px;
  transform-style:preserve-3d;
  transform:rotateY(-26deg);
  transition:transform .7s cubic-bezier(.22,.9,.3,1);
}
.vol:hover .book3d,.vol:focus-visible .book3d{transform:rotateY(-7deg) translateY(-6px);}
.book3d .face{position:absolute;inset:0;backface-visibility:hidden;}
.book3d .front{transform:translateZ(17px);}
.book3d .back{transform:translateZ(-17px) rotateY(180deg);background:var(--cover-bg);}
.book3d .spine{
  width:34px;height:404px;left:-17px;top:0;
  transform:rotateY(-90deg);
  background:var(--cover-bg);color:var(--cover-ink);
  display:flex;align-items:center;justify-content:center;
}
.book3d .spine span{
  font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:0.18em;
  text-transform:uppercase;writing-mode:vertical-rl;white-space:nowrap;
}
.book3d .edge{
  width:32px;height:396px;right:-16px;top:4px;
  transform:rotateY(90deg);
  background:repeating-linear-gradient(to right,#fff 0 2px,#e7e7e3 2px 3px);
}
.book3d .shadow{
  position:absolute;left:6%;right:-4%;bottom:-58px;height:26px;
  background:radial-gradient(ellipse at center,rgba(12,12,13,.28),transparent 68%);
  filter:blur(6px);
}

/* ---- cover artwork (shared by shelf + reader) ---- */
.cover{
  width:100%;height:100%;
  background:var(--cover-bg);color:var(--cover-ink);
  padding:26px 26px 22px;
  display:flex;flex-direction:column;
  position:relative;overflow:hidden;
}
.cover .rule{height:1px;background:currentColor;opacity:.4;}
.cover .top{display:flex;justify-content:space-between;align-items:center;padding-bottom:14px;}
.cover .wm{font-family:var(--head);font-weight:800;font-size:13px;letter-spacing:-0.01em;}
.cover .no{font-family:var(--mono);font-size:10px;letter-spacing:0.16em;text-transform:uppercase;opacity:.7;}
.cover h2{
  margin:auto 0 0;
  font-family:var(--head);font-weight:900;
  font-size:58px;letter-spacing:-0.02em;line-height:0.98;
}
.cover .sub{margin:12px 0 0;font-size:12.5px;line-height:1.5;opacity:.72;max-width:30ch;}
.cover .meta{
  margin-top:auto;padding-top:14px;
  display:flex;justify-content:space-between;gap:10px;
  font-family:var(--mono);font-size:9.5px;letter-spacing:0.12em;text-transform:uppercase;opacity:.75;
}
.cover .tick{width:22px;height:22px;background:#8b8874;margin-bottom:18px;}

/* laminated finish: static sheen + a slow glide while the book sits closed */
.cover::after,.backcover::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:6;
  background:
    linear-gradient(112deg, transparent 34%, rgba(255,255,255,.055) 45%, rgba(255,255,255,.015) 52%, transparent 62%),
    radial-gradient(130% 90% at 10% -6%, rgba(255,255,255,.05), transparent 42%);
  background-size:260% 100%, 100% 100%;
  background-position:88% 0, 0 0;
}
.stage.at-cover .cover::after,
.stage.at-back .backcover::after{
  animation:sheen 7s cubic-bezier(.4,.1,.4,1) infinite;
}
@keyframes sheen{
  0%,55%{background-position:88% 0, 0 0;}
  75%{background-position:12% 0, 0 0;}
  100%{background-position:88% 0, 0 0;}
}

/* ---- signature motif: generated LiDAR contours ---- */
.topo{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none;}
.cover .topo{opacity:.12;z-index:0;}
.backcover .topo{opacity:.10;z-index:0;}
.cover-art{position:absolute;inset:0;z-index:0;overflow:hidden;}
.cover-art .ghost{
  position:absolute;left:0;right:0;bottom:0;height:58%;
  background-size:cover;background-position:center 30%;
  opacity:.42;
  -webkit-mask-image:linear-gradient(to top,#000 45%,transparent);
  mask-image:linear-gradient(to top,#000 45%,transparent);
}
.cover.cover-v2 > *:not(.cover-art){position:relative;z-index:2;}
.cover-title{font-size:clamp(56px,7vw,96px) !important;letter-spacing:-0.03em !important;}

/* ---- cover v3: bone ground, centred plate, type over image ---- */
.cover.cover-v3{background:#f0eee8;color:var(--ink);padding:0;display:block;}
.cover-v3 .mark-sq{position:absolute;top:4.2%;right:5.5%;width:13px;height:13px;background:var(--ink);z-index:4;}
.cover-v3 .cv3-photo{
  position:absolute;left:13.5%;right:9%;top:15%;bottom:9%;
  background-size:cover;background-position:52% 62%;
}
.cover-v3 .cv3-title{
  position:absolute;top:3.6%;left:6.5%;margin:0;z-index:3;
  font-family:var(--head);font-weight:900;
  font-size:clamp(88px,17cqw,150px);line-height:.82;letter-spacing:-0.05em;
  color:#918a6e;mix-blend-mode:multiply;
}
.cover-v3 .cv3-meta{
  position:absolute;left:4.2%;z-index:4;
  writing-mode:vertical-rl;transform:rotate(180deg);
  display:flex;gap:7px;
  font-family:var(--mono);font-size:8.5px;letter-spacing:0.14em;text-transform:uppercase;
  color:var(--grey);
}
.cover-v3 .cv3-meta .k{font-weight:600;color:var(--ink);}
.cover-v3 .cv3-loc{bottom:8%;}
.cover-v3 .cv3-site{bottom:42%;}
.cover-v3 .cv3-ed{top:3.5%;}

/* scaled down on the shelf volume */
.book3d .cv3-title{font-size:66px;}
.book3d .cv3-meta{font-size:6.5px;gap:5px;}
.book3d .mark-sq{width:9px;height:9px;}

/* chapter openers: cover stock, tussock numerals */
.pg.chapter{background:#f0eee8;}
.pg.chapter .chnum{
  position:absolute;top:18px;right:16px;z-index:0;
  font-family:var(--head);font-weight:900;
  font-size:clamp(130px,14vw,190px);line-height:.85;letter-spacing:-0.05em;
  color:#918a6e;mix-blend-mode:multiply;opacity:.55;
  user-select:none;
}
.pg.chapter .runhead,.pg.chapter .body{position:relative;z-index:1;}
.pg.chapter .body{padding-top:66px;}
.pg.chapter h2{max-width:70%;}

/* the board + palette, as opening pages */
.pg.boardpg .body{display:flex;flex-direction:column;}
.boardgrid{
  flex:1;min-height:0;margin-top:14px;
  display:grid;gap:12px;
  grid-template-columns:1fr 1fr;
  grid-template-rows:1fr 1fr 1fr;
}
.boardgrid.ga{grid-template-areas:"a c" "a c" "d e";}
.boardgrid.gb{grid-template-areas:"a b" "c b" "d e";}
.boardgrid figure{margin:0;display:flex;flex-direction:column;gap:6px;min-height:0;}
.boardgrid.ga .t1{grid-area:a;} .boardgrid.ga .t2{grid-area:b;} .boardgrid.ga .t3{grid-area:c;} .boardgrid.ga .t4{grid-area:d;} .boardgrid.ga .t5{grid-area:e;}
.boardgrid.gb .t1{grid-area:a;} .boardgrid.gb .t2{grid-area:b;} .boardgrid.gb .t3{grid-area:c;} .boardgrid.gb .t4{grid-area:d;} .boardgrid.gb .t5{grid-area:e;}
.boardgrid img{flex:1;min-height:0;width:100%;object-fit:cover;border:1px solid var(--hair);}
.boardgrid h5{
  margin:0;font-family:var(--head);font-weight:700;font-size:10.5px;
  letter-spacing:-0.005em;color:var(--ink);flex:0 0 auto;
}

.pg.palpg .body{display:flex;flex-direction:column;}
.pg.palpg h2{margin:0 0 18px;}
.palgrid{
  display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;
  flex:1;min-height:0;align-content:stretch;
}
.palgrid .sw{
  display:flex;flex-direction:column;gap:3px;min-height:0;
  border:1px solid var(--hair);padding:7px;
}
.palgrid .sw i{flex:1;min-height:0;display:block;}
.palgrid .sw b{font-size:11px;font-weight:700;letter-spacing:-0.01em;margin-top:4px;}
.palgrid .sw span{font-family:var(--mono);font-size:8.5px;letter-spacing:0.1em;text-transform:uppercase;color:var(--grey);}
.palgrid .sw.blue{outline:2px solid var(--accent);outline-offset:-1px;}

/* the board, art-directed */
.pg.inspo{overflow:hidden;}
.pg.inspo img{position:absolute;object-fit:cover;margin:0;}
.pg.inspo .fig{
  position:absolute;font-family:var(--mono);font-size:8.5px;font-weight:600;
  letter-spacing:0.14em;text-transform:uppercase;color:var(--grey);
}
.figindex{
  position:absolute;display:flex;flex-direction:column;gap:6px;
  font-family:var(--mono);font-size:9px;letter-spacing:0.08em;text-transform:uppercase;color:var(--grey);
}
.figindex b{font-weight:600;color:var(--accent);margin-right:6px;}

.inspo-state{margin:14px 0 0;font-size:clamp(22px,2.2vw,30px) !important;}
.inspo-intro{max-width:34ch;margin-top:12px !important;}
/* left page: ferns anchor bleeding off the bottom-left corner, awning small top right */
.inspo-l .ia{left:0;bottom:0;width:56%;height:46%;}
.inspo-l .ib{top:9%;right:0;width:26%;height:24%;}
.inspo-l .fa{left:58%;bottom:3.2%;}
.inspo-l .fb{top:34.5%;right:7.5%;}
.inspo-l .figindex{right:7.5%;bottom:5%;width:27%;text-align:left;}
/* right page: corrugate bleeding off the top-right corner, stilted mid-left, burner bottom-right */
.inspo-r .ic{top:0;right:0;width:74%;height:38%;}
.inspo-r .id{left:8%;top:45%;width:36%;height:33%;}
.inspo-r .ie{right:8%;bottom:9%;width:42%;height:34%;}
.inspo-r .fc{top:39.5%;right:8%;}
.inspo-r .fd{left:8%;top:79.5%;}
.inspo-r .fe{right:8%;bottom:5.5%;}
.inspo-r .figindex{left:8%;top:6%;width:15%;}

/* the palette as a material stack */
.pg.palstack{padding:0;display:flex;flex-direction:column;}
.pg.palstack .band{
  flex:1 1 0;min-height:0;position:relative;
  display:flex;align-items:flex-end;
  padding:0 26px 8px;
}
.pg.palstack .pal-head2{position:absolute;top:26px;left:26px;right:26px;}
.pg.palstack .pal-head2 h2{margin:10px 0 0;font-size:clamp(20px,2vw,27px);}
.pg.palstack .bandlabel{
  display:flex;justify-content:space-between;align-items:baseline;gap:12px;width:100%;
  padding-bottom:4px;
}
.pg.palstack .bandlabel b{font-size:11.5px;font-weight:700;letter-spacing:-0.01em;}
.pg.palstack .bandlabel span{font-family:var(--mono);font-size:8.5px;letter-spacing:0.12em;text-transform:uppercase;opacity:.75;}
.pg.palstack .pagenum{display:none;}

/* the brief as vibes */
.pg.vibespg .body{display:flex;flex-direction:column;}
.vibelist{display:flex;flex-direction:column;gap:16px;margin-top:26px;}
.vibelist span{
  font-family:var(--head);font-weight:800;
  font-size:clamp(19px,2vw,26px);letter-spacing:-0.02em;line-height:1.15;
  border-bottom:1px solid var(--hair-soft);padding-bottom:14px;
}
.vibelist span.acc{color:var(--accent);border-bottom:0;}

/* the land: display spread */
.pg.land{background:#f0eee8;}
.pg.land .coords{margin:0 0 26px;color:var(--accent);font-weight:600;}
.pg.land .land-display{
  margin:0 0 24px;
  font-family:var(--head);font-weight:900;
  font-size:clamp(34px,3.6vw,52px);line-height:1.0;letter-spacing:-0.03em;
}
.pg.land p{max-width:44ch;}
.pg.land .land-listing{margin-top:auto;padding-top:18px;border-top:1px solid var(--hair);}
.pg.land .body{display:flex;flex-direction:column;}

/* El Croquis-style data sheet */
.datasheet{margin:16px 0 0;border-top:2px solid var(--ink);}
.datasheet .drow{
  display:flex;justify-content:space-between;gap:16px;
  padding:8px 1px;border-bottom:1px solid var(--hair-soft);
}
.datasheet .drow span:first-child{
  font-family:var(--mono);font-size:9.5px;font-weight:600;letter-spacing:0.12em;
  text-transform:uppercase;color:var(--grey);padding-top:2px;
}
.datasheet .drow span:last-child{font-size:12.5px;font-weight:600;color:var(--ink);text-align:right;}

/* endpapers */
.pg.endpaper{padding:0;background:var(--paper);}
.pg.endpaper .topo{opacity:.65;}
.ep-imprint{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  background:linear-gradient(to top,var(--paper) 72%,transparent);
  padding:38px 34px 24px;
  display:flex;flex-direction:column;gap:7px;
}
.ep-imprint p{margin:0;font-size:11px;color:var(--ink-70);max-width:36ch;line-height:1.55;}
.ep-imprint .mono{font-size:9px;letter-spacing:0.12em;}
.ep-imprint .sq{width:10px;height:10px;flex:0 0 10px;background:#8b8874;}

/* plate numbers in captions */
.pg.bleed .cap{display:flex;align-items:baseline;gap:10px;}
.pg.bleed .cap b{font-weight:600;color:#9db8ff;flex:0 0 auto;}

/* the collage endpaper: fragments of the site */
.pg.collage{padding:0;background:var(--paper);overflow:hidden;}
.pg.collage .topo{opacity:.3;}
.pg.collage .cg{position:absolute;object-fit:cover;box-shadow:0 10px 26px rgba(12,12,13,.14);}
.pg.collage .cg.a{left:9%;top:7%;width:36%;height:24%;}
.pg.collage .cg.b{right:11%;top:12%;width:30%;height:36%;}
.pg.collage .cg.c{left:16%;top:36%;width:42%;height:28%;z-index:2;}
.pg.collage .cg.d{right:16%;top:53%;width:26%;height:19%;}
.pg.collage .ep-imprint{z-index:3;}

/* loose collage pages */
.pg.clg{padding:0;background:var(--paper);overflow:hidden;}
.pg.clg .cg{position:absolute;object-fit:cover;box-shadow:0 10px 26px rgba(12,12,13,.14);}
.pg.clg.lineage .s{left:7%;top:8%;width:56%;height:29%;z-index:3;}
.pg.clg.lineage .credit{
  position:absolute;left:7%;top:38%;z-index:4;
  font-family:var(--mono);font-size:7.5px;letter-spacing:0.1em;
  line-height:1.45;max-width:58%;text-transform:uppercase;color:var(--grey);
}
.pg.clg.lineage .a{right:7%;top:30%;width:30%;height:23%;}
.pg.clg.lineage .b{left:9%;top:45%;width:33%;height:25%;z-index:2;}
.pg.clg.lineage .c{right:11%;top:57%;width:31%;height:26%;}
.pg.clg.lineage .d{left:17%;top:73%;width:26%;height:21%;z-index:2;}
.pg.clg.ground .a{left:9%;top:8%;width:46%;height:32%;}
.pg.clg.ground .b{right:9%;top:24%;width:34%;height:44%;z-index:2;}
.pg.clg.ground .c{left:13%;top:48%;width:42%;height:34%;}

/* verse set into a full-bleed image */
.pg.fullverse::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to bottom, rgba(8,9,10,.34), transparent 45%);
}
.pg.fullverse .v-over{
  position:absolute;left:9%;top:9%;right:9%;z-index:2;margin:0;
  font-size:clamp(12px,1.15vw,14.5px);line-height:1.7;
  color:#fff;
}

/* 02 · how it worked */
.pg.how{background:#f0eee8;}
.pg.how .body{display:flex;flex-direction:column;justify-content:center;padding:0 6%;}
.pg.how h2{margin:0 0 18px;font-size:clamp(21px,2.3vw,31px);line-height:1.1;}
.pg.how p{font-size:12.5px;line-height:1.66;max-width:38ch;}
.layers{list-style:none;margin:6px 0 18px;padding:0;counter-reset:l;}
.layers li{
  counter-increment:l;
  display:flex;align-items:baseline;gap:10px;
  padding:7px 0;border-bottom:1px solid rgba(12,12,13,.09);
}
.layers li::before{
  content:counter(l,decimal-leading-zero);
  font-family:var(--mono);font-size:8.5px;font-weight:600;letter-spacing:0.1em;
  color:#8b8874;flex:0 0 auto;
}
.layers b{font-size:12px;font-weight:700;letter-spacing:-0.01em;flex:0 0 auto;}
.layers span{font-size:11px;color:var(--grey);margin-left:auto;text-align:right;}

/* section marker above a verse */
/* one photograph printed across the whole spread */
.pg.spreadphoto{padding:0;overflow:hidden;}
.pg.spreadphoto .sp-img{
  position:absolute;top:0;bottom:0;width:200%;
  background-repeat:no-repeat;background-position:center;background-size:cover;
}
.sp-l .sp-img{left:0;}
.sp-r .sp-img{left:-100%;}
.pg.spreadphoto::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:46%;z-index:1;
  background:linear-gradient(to top, rgba(8,9,10,.8) 6%, rgba(8,9,10,.42) 40%, transparent 100%);
}
.pg.spreadphoto .sp-copy{position:absolute;left:9%;right:9%;bottom:8%;z-index:2;}
.pg.spreadphoto .sp-label{
  margin:0 0 9px;
  font-family:var(--mono);font-size:8.5px;font-weight:600;letter-spacing:0.14em;
  text-transform:uppercase;color:rgba(255,255,255,.72);
}
.pg.spreadphoto p:not(.sp-label){
  margin:0;color:#fff;
  font-size:clamp(11px,1.05vw,13px);line-height:1.65;max-width:34ch;
}
.pg.spreadphoto .pagenum{display:none;}

/* full-bleed image with a small copy block */
.pg.fullcap{padding:0;overflow:hidden;}
.pg.fullcap > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.pg.fullcap::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:52%;z-index:1;
  background:linear-gradient(to top, rgba(8,9,10,.86) 6%, rgba(8,9,10,.5) 38%, transparent 100%);
}
.pg.fullcap .fc-copy{
  position:absolute;left:9%;right:9%;bottom:8%;z-index:2;
}
.pg.fullcap .fc-label{
  margin:0 0 9px;
  font-family:var(--mono);font-size:8.5px;font-weight:600;letter-spacing:0.14em;
  text-transform:uppercase;color:rgba(255,255,255,.72);
}
.pg.fullcap p:not(.fc-label){
  margin:0;color:#fff;
  font-size:clamp(11px,1.05vw,13px);line-height:1.65;max-width:34ch;
}
.pg.fullcap .pagenum{color:rgba(255,255,255,.5);}

/* a drawing with its text beneath */
.pg.drawtext{padding:8% 9% 8%;display:flex;flex-direction:column;background:var(--paper);}
.pg.drawtext .eyebrow{flex:0 0 auto;margin:0 0 14px;}
.pg.drawtext .eyebrow.spacer{visibility:hidden;}
.pg.drawtext figure{flex:1 1 auto;min-height:0;margin:0 0 14px;display:flex;}
.pg.drawtext img{width:100%;height:100%;object-fit:contain;object-position:center;}
.pg.drawtext .cap{
  flex:0 0 auto;margin:0 0 9px;
  font-family:var(--mono);font-size:8px;letter-spacing:0.1em;
  text-transform:uppercase;color:var(--grey);
}
.pg.drawtext p:not(.cap):not(.eyebrow){
  flex:0 0 auto;margin:0;
  font-size:clamp(11px,1.05vw,13px);line-height:1.7;color:var(--ink);max-width:38ch;
}

/* one image filling the page */
.pg.oneup{padding:8% 8% 9%;display:flex;}
.pg.oneup figure{margin:0;flex:1;display:flex;flex-direction:column;gap:9px;min-height:0;justify-content:center;}
.pg.oneup img{flex:1;min-height:0;width:100%;object-fit:contain;}
.pg.oneup figcaption{
  font-family:var(--mono);font-size:8px;letter-spacing:0.1em;text-transform:uppercase;color:var(--grey);
  flex:0 0 auto;
}

/* two images stacked on one page */
.pg.twoup{padding:8% 9% 9%;display:flex;flex-direction:column;gap:5%;}
.pg.twoup figure{margin:0;flex:1;display:flex;flex-direction:column;gap:7px;min-height:0;}
.pg.twoup img{flex:1;min-height:0;width:100%;object-fit:contain;object-position:center;}
.pg.twoup figcaption{
  font-family:var(--mono);font-size:8px;letter-spacing:0.1em;text-transform:uppercase;color:var(--grey);
  flex:0 0 auto;
}

/* one image printed across the whole spread; each page clips its half */
.pg.spreadimg{padding:0;background:var(--paper);overflow:hidden;}
.pg.spreadimg .si{
  position:absolute;top:9%;bottom:12%;width:200%;
  background-repeat:no-repeat;background-position:center;background-size:contain;
}
.si-l .si{left:0;}
.si-r .si{left:-100%;}
.si-cap{
  position:absolute;bottom:6.5%;z-index:2;
  font-family:var(--mono);font-size:8px;letter-spacing:0.1em;text-transform:uppercase;color:var(--grey);
}
.si-cap.l{left:9%;}
.si-cap.r{right:9%;}
.pg.spreadimg .pagenum{display:none;}

/* the walk: site reconnaissance laid out as snapshots */
.pg.walk{padding:0;background:var(--paper);overflow:hidden;}
.pg.walk .topo{opacity:.3;}
.pg.walk .wk-head{position:absolute;left:9%;top:8%;z-index:3;}
.pg.walk .wk-head .eyebrow{margin:0 0 8px;}
.pg.walk .wk-head h2{margin:0;font-size:clamp(20px,2.2vw,30px);}
.pg.walk .sn{position:absolute;margin:0;z-index:2;}
.pg.walk .sn img{
  width:100%;height:100%;object-fit:cover;display:block;
  border:5px solid #fff;box-shadow:0 10px 24px rgba(12,12,13,.18);
}
.pg.walk .sn figcaption{
  margin-top:7px;
  font-family:var(--mono);font-size:8px;letter-spacing:0.1em;text-transform:uppercase;color:var(--grey);
}
/* left page */
.walk-l .a{left:9%;top:27%;width:44%;height:26%;transform:rotate(-1.4deg);}
.walk-l .b{right:8%;top:16%;width:36%;height:22%;transform:rotate(1.6deg);}
.walk-l .c{right:12%;top:48%;width:33%;height:27%;transform:rotate(-0.8deg);}
/* right page */
.walk-r .d{left:8%;top:9%;width:42%;height:27%;transform:rotate(1.1deg);}
.walk-r .e{right:8%;top:22%;width:38%;height:24%;transform:rotate(-1.5deg);}
.walk-r .f{left:14%;top:52%;width:36%;height:28%;transform:rotate(-0.9deg);}
/* pencilled observations */
.pg.walk .wk-note{
  position:absolute;z-index:3;margin:0;
  font-family:var(--mono);font-size:8.5px;font-weight:500;
  letter-spacing:0.12em;text-transform:uppercase;color:var(--ink-70);
  border-left:2px solid #8b8874;padding-left:8px;line-height:1.5;
}
.walk-r .n1{left:9%;top:41%;}
.walk-r .n2{right:9%;top:56%;}
.walk-r .n3{right:14%;bottom:11%;}
.pg.walk .ep-imprint{z-index:4;padding:34px 9% 22px;}
.pg.walk .ep-imprint p{font-size:10.5px;}

/* the opening statement, run across a spread */
/* one statement rendered at spread width; each page clips its half,
   so words break across the gutter the way they do in print */
.pg.stmt{background:#f0eee8;padding:0;overflow:hidden;}
.pg.stmt .s{
  position:absolute;top:50%;transform:translateY(-50%);
  width:200%;margin:0;padding:0 5%;
  font-family:var(--head);font-weight:900;
  font-size:clamp(28px,4.6vw,62px);line-height:1.04;letter-spacing:-0.04em;text-align:center;
  color:var(--ink);
}
.pg.stmt-l .s{left:0;}
.pg.stmt-r .s{left:-100%;}
.pg.stmt .pagenum{display:none;}

/* prose pages */
.pg.prose{background:#f0eee8;padding:0;display:flex;flex-direction:column;justify-content:center;}
.pg.prose .pr{margin:0 0 4%;padding:0 13%;}
.pg.prose .pr .eyebrow{margin:0 0 16px;}
.pg.prose p{
  margin:0;
  font-size:clamp(12px,1.15vw,14.5px);line-height:1.72;letter-spacing:0;
  color:var(--ink);max-width:36ch;
}
.pg.prose p + p{margin-top:13px;}

/* TLP mounts: image in generous white, caption whispered below */
.pg.mount{padding:0;}
.pg.mount .mfig{position:absolute;left:11%;right:11%;top:8.5%;bottom:15%;margin:0;}
.pg.mount .mfig img{width:100%;height:100%;object-fit:cover;}
.pg.mount.contain .mfig img{object-fit:contain;}
.pg.mount .mcap{
  position:absolute;left:11%;right:11%;bottom:9.8%;
  display:flex;align-items:baseline;gap:9px;
  font-family:var(--mono);font-size:8.5px;letter-spacing:0.1em;text-transform:uppercase;color:var(--grey);
}
.pg.mount .mcap b{font-weight:600;color:var(--accent);flex:0 0 auto;}

/* pure full-bleed */
.pg.full{padding:0;}
.pg.full > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}

/* rotated marginalia on the outer edge */
.sidelab{
  position:absolute;top:50%;z-index:4;
  font-family:var(--mono);font-size:7.5px;letter-spacing:0.18em;text-transform:uppercase;
  color:var(--faint);white-space:nowrap;
  writing-mode:vertical-rl;
}
.sidelab.r{right:13px;transform:translateY(-50%);}
.sidelab.l{left:13px;transform:translateY(-50%) rotate(180deg);}
.pg.full .sidelab{color:rgba(255,255,255,.75);}

/* chapter body: justified two-column setting */
.pg.chapter .cols{
  columns:2;column-gap:22px;
  font-size:10.8px;line-height:1.62;
  text-align:justify;hyphens:auto;
}
.pg.chapter .cols p{font-size:inherit;margin:0 0 10px;}
.pg.chapter .cols .datasheet,
.pg.chapter .cols .quoteline,
.pg.chapter .cols .pullquote,
.pg.chapter .cols .ledger{break-inside:avoid;}

/* mounted plates: figures on white, El Croquis style */
.pg.plate .body{display:flex;}
.pg.plate figure{
  flex:1;display:flex;flex-direction:column;justify-content:center;gap:14px;
  margin:0;min-height:0;
}
.pg.plate img{
  width:100%;max-height:78vh;object-fit:contain;
  border:1px solid var(--hair);
}
.pg.plate figcaption{
  display:flex;align-items:baseline;gap:10px;
  font-family:var(--mono);font-size:9.5px;letter-spacing:0.1em;
  text-transform:uppercase;color:var(--grey);
}
.pg.plate figcaption b{font-weight:600;color:var(--accent);flex:0 0 auto;}

/* display pull-quote */
.pullquote{
  margin:20px 0 0;padding-top:16px;border-top:2px solid var(--ink);
  font-family:var(--head);font-weight:800;
  font-size:clamp(16px,1.6vw,20px);line-height:1.4;letter-spacing:-0.01em;color:var(--ink);
}
.pullquote .mono{display:block;margin-top:12px;}

/* drop cap on the opening chapter */
.pg.chapter .dropcap::first-letter{
  float:left;
  font-family:var(--head);font-weight:900;
  font-size:52px;line-height:.8;
  padding:7px 10px 0 0;color:var(--ink);
}

/* the honest ledger, set as a ledger */
.ledger{margin-top:6px;}
.ledger h4{
  font-family:var(--mono);font-size:9.5px;font-weight:600;letter-spacing:0.14em;
  text-transform:uppercase;color:var(--grey);margin:18px 0 4px;
}
.ledger ul{list-style:none;margin:0;padding:0;}
.ledger li{
  display:flex;gap:11px;align-items:baseline;
  padding:7px 1px;border-bottom:1px solid var(--hair-soft);
  font-size:12.5px;line-height:1.5;color:var(--ink-70);
}
.ledger li::before{content:"";width:8px;height:8px;flex:0 0 8px;background:var(--accent);transform:translateY(-1px);}
.ledger ul.debit li::before{background:transparent;border:1px solid var(--faint);}

/* shelf side card */
.vol-info{max-width:520px;padding-bottom:70px;}
.vol-info .mono{display:block;margin-bottom:14px;}
.vol-info h3{
  margin:0;font-family:var(--head);font-weight:800;
  font-size:clamp(22px,2.6vw,34px);letter-spacing:-0.02em;line-height:1.08;
}
.vol-info p{margin:14px 0 0;color:var(--grey);font-size:15.5px;max-width:52ch;}
.vol-info .facts{margin:22px 0 0;display:flex;flex-wrap:wrap;gap:8px;}
.vol-info .facts span{
  font-family:var(--mono);font-size:10.5px;letter-spacing:0.08em;text-transform:uppercase;
  color:var(--ink-70);border:1px solid var(--hair);padding:7px 11px;background:var(--paper);
}
.vol-info .open{
  display:inline-flex;align-items:center;gap:10px;margin-top:26px;
  font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:0.1em;text-transform:uppercase;
  background:var(--ink);color:#fff;padding:13px 18px;
}

.shelf-foot{max-width:1480px;margin:0 auto;padding:22px 40px 60px;display:flex;justify-content:space-between;gap:20px;}

/* =========================================================
   READER  -  the book on the coffee table
   ========================================================= */
.reader{
  min-height:calc(100vh - 60px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:26px 24px 18px;
  background-color:#241610;
  background-image:
    radial-gradient(120% 90% at 50% -10%, rgba(255,244,225,.16), transparent 55%),
    radial-gradient(150% 130% at 50% 120%, rgba(0,0,0,.60), transparent 62%),
    linear-gradient(rgba(24,13,7,.30), rgba(24,13,7,.30)),
    url("assets/table.jpg");
  background-size:auto,auto,auto,780px;
  background-position:center top, center, center, center;
}

/* cap the spread so the book sits on the table with air around it:
   spread aspect = (2 * 560) / 730 */
.stage{width:min(94vw,1380px,calc((100vh - 205px) * 1.534));position:relative;z-index:2;transition:transform .55s cubic-bezier(.2,.7,.2,1);}
/* closed, the volume fills only one half of the spread: slide it back to the middle */
@media(min-width:900px){
  .stage.at-cover{transform:translateX(-25%);}
  .stage.at-back{transform:translateX(25%);}
}
@media(prefers-reduced-motion:reduce){.stage{transition:none;}}
.stage::before{ /* soft pooled shadow under the book */
  content:"";position:absolute;left:8%;right:8%;top:58%;bottom:-3%;
  background:radial-gradient(ellipse at center,rgba(0,0,0,.55),transparent 70%);
  filter:blur(20px);
  transition:left .9s ease,right .9s ease;
}
.stage::after{ /* tighter contact shadow at the edges */
  content:"";position:absolute;left:10%;right:10%;top:88%;bottom:-1.5%;
  background:radial-gradient(ellipse at center,rgba(0,0,0,.5),transparent 65%);
  filter:blur(8px);
  transition:left .9s ease,right .9s ease;
}
/* closed at the front: the volume is the right half; closed at the back: the left */
.stage.at-cover::before{left:51%;right:5%;}
.stage.at-cover::after{left:53%;right:7%;}
.stage.at-back::before{left:5%;right:51%;}
.stage.at-back::after{left:7%;right:53%;}
#flipbook{position:relative;z-index:1;margin:0 auto;}

/* pages managed by StPageFlip */
.fb-page{
  background:var(--page-bg);
  overflow:hidden;
}
.fb-page::after{ /* paper grain */
  content:"";position:absolute;inset:0;pointer-events:none;z-index:5;
  opacity:.55;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/><feComponentTransfer><feFuncA type='linear' slope='0.055'/></feComponentTransfer></filter><rect width='240' height='240' filter='url(%23n)'/></svg>");
}
.fb-page[data-density="hard"]{background:var(--cover-bg);}
.fb-page img{-webkit-user-drag:none;user-select:none;}

.backcover{
  position:relative;
  height:100%;background:var(--cover-bg);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;
  padding:30px;text-align:center;
}
.backcover .sq{width:18px;height:18px;}

/* ---- page content ---- */
.pg{
  height:100%;display:flex;flex-direction:column;
  padding:40px 44px 30px;
  position:relative;
}
.pg .runhead{
  display:flex;justify-content:space-between;gap:12px;
  font-family:var(--mono);font-size:9.5px;font-weight:500;letter-spacing:0.14em;
  text-transform:uppercase;color:var(--faint);
  padding-bottom:12px;border-bottom:1px solid var(--hair-soft);
  flex:0 0 auto;
}
.pg .body{flex:1 1 auto;overflow:hidden;padding-top:22px;}
.pg .eyebrow{
  font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:0.16em;
  text-transform:uppercase;color:#8b8874;margin:0 0 14px;
}
.pg h2{
  margin:0 0 14px;font-family:var(--head);font-weight:900;
  font-size:clamp(20px,2.3vw,30px);letter-spacing:-0.02em;line-height:1.08;
}
.pg p{margin:0 0 12px;font-size:13.5px;line-height:1.62;color:var(--ink-70);}
.pg p b{color:var(--ink);font-weight:600;}
.pg .quoteline{
  border-left:3px solid var(--accent);background:var(--wash);
  padding:12px 15px;margin:16px 0 0;font-size:12.5px;color:var(--ink-70);
}
.pg .quoteline .mono{display:block;margin-bottom:4px;font-size:9.5px;}
.pg .folio{
  flex:0 0 auto;padding-top:12px;
  display:flex;justify-content:space-between;gap:12px;
  font-family:var(--mono);font-size:9.5px;letter-spacing:0.12em;text-transform:uppercase;color:var(--faint);
}

/* full-bleed image page */
.pg.bleed{padding:0;}
.pg.bleed img{width:100%;height:100%;object-fit:cover;-webkit-user-drag:none;}
.pg.bleed .chip{
  position:absolute;top:14px;left:14px;z-index:2;
  font-family:var(--mono);font-size:9.5px;font-weight:600;letter-spacing:0.12em;text-transform:uppercase;
  padding:5px 8px;background:rgba(12,12,13,.82);color:#fff;
}
.pg.bleed .chip.accent{background:var(--accent);}
.pg.bleed .cap{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  font-family:var(--mono);font-size:9.5px;letter-spacing:0.1em;text-transform:uppercase;
  color:#fff;background:linear-gradient(to top,rgba(12,12,13,.72),transparent);
  padding:26px 14px 10px;
}

/* folios */
.pagenum{
  position:absolute;bottom:16px;z-index:4;
  font-family:var(--mono);font-size:9.5px;letter-spacing:0.12em;color:var(--faint);
}
.pagenum.l{left:22px;}
.pagenum.r{right:22px;}

/* contents */
.toc{display:flex;flex-direction:column;margin-top:10px;}
.toc .row{display:flex;align-items:baseline;gap:12px;padding:12px 2px;border-bottom:1px solid var(--hair-soft);}
.toc .n{font-family:var(--mono);font-size:10px;font-weight:600;color:var(--accent);flex:0 0 auto;}
.toc .t{font-weight:700;font-size:14px;letter-spacing:-0.01em;}
.toc .dots{flex:1;border-bottom:1px dotted var(--hair);transform:translateY(-3px);}
.toc .p{font-family:var(--mono);font-size:10px;color:var(--grey);flex:0 0 auto;}

/* flyleaf */
.pg.flyleaf{align-items:center;justify-content:center;}

/* title page: full-bleed listing photo, text knocked out */
.pg.title-page{padding:0;color:#fff;}
.pg.title-page .tp-photo{position:absolute;inset:0;background-size:cover;background-position:55% 45%;}
.pg.title-page .tp-shade{
  position:absolute;inset:0;
  background:linear-gradient(to bottom, rgba(8,9,10,.82) 0%, rgba(8,9,10,.55) 30%, rgba(8,9,10,.16) 55%, rgba(8,9,10,.05) 72%, rgba(8,9,10,.66) 100%);
}
.pg.title-page .body{position:relative;z-index:2;display:flex;flex-direction:column;height:100%;padding:30px 32px 26px;}
.pg.title-page .tp-top{display:flex;justify-content:space-between;align-items:center;}
.pg.title-page .tp-top .mono{color:rgba(255,255,255,.85);font-size:9.5px;}
.pg.title-page .bigsq{display:block;width:16px;height:16px;background:rgba(255,255,255,.92);}
.pg.title-page .eyebrow{margin:20px 0 0;color:#9db8ff;}
.pg.title-page h1{
  margin:14px 0 0;font-family:var(--head);font-weight:900;
  font-size:clamp(28px,3.1vw,42px);letter-spacing:-0.025em;line-height:1.04;color:#fff;
}
.pg.title-page .lede{margin:16px 0 0;font-size:12.5px;line-height:1.6;color:rgba(255,255,255,.82);max-width:38ch;}
.pg.title-page .imprint{
  margin-top:auto;display:flex;flex-direction:column;gap:6px;
  padding-top:12px;border-top:1px solid rgba(255,255,255,.3);
}
.pg.title-page .imprint .mono{color:rgba(255,255,255,.65);font-size:9px;}
.pg.title-page .pagenum{color:rgba(255,255,255,.55);}

/* the frozen-artifact card, book edition */
.pg .v1-card{
  display:flex;flex-direction:column;gap:10px;justify-content:flex-end;
  height:100%;background:var(--ink);color:#fff;padding:26px;
  transition:background .15s ease;
}
.pg .v1-card:hover{background:var(--accent);}
.pg .v1-card .mono{color:rgba(255,255,255,.55);}
.pg .v1-card h3{margin:0;font-family:var(--head);font-weight:800;font-size:24px;letter-spacing:-0.02em;line-height:1.1;}
.pg .v1-card p{margin:0;color:rgba(255,255,255,.66);font-size:12.5px;}
.pg .v1-card .go{font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:0.1em;text-transform:uppercase;border:1px solid rgba(255,255,255,.4);padding:10px 13px;align-self:flex-start;margin-top:8px;}

/* colophon */
.pg .colophon{display:flex;flex-direction:column;gap:9px;margin-top:6px;}
.pg .colophon .row{display:flex;justify-content:space-between;gap:14px;border-bottom:1px solid var(--hair-soft);padding-bottom:8px;}
.pg .colophon .row span:first-child{font-family:var(--mono);font-size:9.5px;letter-spacing:0.12em;text-transform:uppercase;color:var(--faint);}
.pg .colophon .row span:last-child{font-size:12px;color:var(--ink-70);text-align:right;}

/* reader chrome */
.reader-controls{
  display:flex;align-items:center;gap:26px;margin-top:30px;position:relative;z-index:2;
}
.reader-controls .counter{font-family:var(--mono);font-size:10.5px;letter-spacing:0.14em;text-transform:uppercase;color:rgba(255,255,255,.75);min-width:110px;text-align:center;}
.turn-btn{
  font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:0.1em;text-transform:uppercase;
  border:1px solid rgba(255,255,255,.35);background:transparent;color:#fff;
  padding:11px 16px;cursor:pointer;
}
.turn-btn:hover{background:rgba(255,255,255,.14);}
.turn-btn:disabled{opacity:.3;pointer-events:none;}
.hint{margin-top:10px;font-family:var(--mono);font-size:9.5px;letter-spacing:0.12em;text-transform:uppercase;color:rgba(255,255,255,.5);position:relative;z-index:2;}

@media(max-width:900px){
  .shelf{flex-direction:column;align-items:flex-start;gap:60px;}
  .reader{padding:24px 12px 20px;}
}