/* ─────────────────────────────────────────────────────────────────────────────
   Garrick — At the Bench
   Palette: Norfolk Bench
     Bench Linen   #E6E1D6
     Workshop Wht  #F4F1EA
     Graphite      #1A1A1C
     Blued Steel   #1F3A5F
     Brass Touch   #A38256

   Pairing: Marcellus (display, body) · DM Mono (technical readouts)
───────────────────────────────────────────────────────────────────────────── */

:root{
  --linen:#E6E1D6;
  --linen-deep:#D8D2C2;
  --paper:#F4F1EA;
  --ink:#1A1A1C;
  --ink-soft:#2A2A2D;
  --rule:#1A1A1C;
  --steel:#1F3A5F;
  --brass:#A38256;
  --silver-shadow: rgba(26,26,28,0.18);

  --serif: "Marcellus", "Trajan Pro", "Cormorant Garamond", Georgia, serif;
  --mono:  "DM Mono", "IBM Plex Mono", ui-monospace, Menlo, monospace;

  --maxw: 1480px;
  --gutter: clamp(20px, 4.4vw, 88px);
  --hairline: 1px;

  --t-soft:  cubic-bezier(.22,.61,.36,1);
  --t-cut:   cubic-bezier(.65,.05,.05,.95); /* the rose-engine action */
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{ -webkit-text-size-adjust: 100%; background:var(--linen); }

body{
  background:var(--linen);
  color:var(--ink);
  font-family:var(--serif);
  font-size:17px;
  line-height:1.55;
  letter-spacing:0.005em;
  cursor:none;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
  text-rendering: optimizeLegibility;
}
@media (hover:none), (pointer:coarse){ body{ cursor:auto; } }
@media (max-width: 640px){
  body{ font-size:16px; }
}

/* prevent FOUC of content during loader */
body.state-loading .bench-mast,
body.state-loading .bench{ opacity:0; transform: translateY(6px); }
.bench-mast,.bench{ transition: opacity 1.4s var(--t-soft) .35s, transform 1.4s var(--t-soft) .35s }

::selection{ background:var(--ink); color:var(--paper); }

a{ color:inherit; text-decoration:none; }
a[data-cursor]{ position:relative; }
a[data-cursor]::after{
  content:""; position:absolute; left:0; right:0; bottom:-3px;
  height:1px; background:currentColor;
  transform-origin:left center; transform:scaleX(.18);
  transition: transform .9s var(--t-soft);
}
a[data-cursor]:hover::after{ transform:scaleX(1); }

/* ─── Living texture ────────────────────────────────────────────────────── */
.bench-texture{
  position:fixed; inset:0; pointer-events:none; z-index:1;
}
.bench-texture__sheen{
  position:absolute; inset:-30%;
  background: conic-gradient(from 218deg at 38% 30%,
    rgba(244,241,234,0.00) 0deg,
    rgba(244,241,234,0.42) 60deg,
    rgba(230,225,214,0.00) 130deg,
    rgba(26,26,28,0.06) 220deg,
    rgba(244,241,234,0.20) 300deg,
    rgba(244,241,234,0.00) 360deg);
  filter: blur(60px);
  animation: sheen 38s linear infinite;
  opacity:.6;
  mix-blend-mode: soft-light;
}
@keyframes sheen{
  0%   { transform: rotate(0deg)   translate3d(0,0,0); }
  100% { transform: rotate(360deg) translate3d(0,0,0); }
}
.bench-texture__fibre{
  position:absolute; inset:0; width:100%; height:100%;
  opacity:.34;
  mix-blend-mode: multiply;
}

/* ─── Custom cursor — engineer's crosshair, caliper graduations ─────────── */
.cursor{
  position:fixed; top:0; left:0;
  width:80px; height:80px;
  margin-left:-40px; margin-top:-40px;
  pointer-events:none;
  z-index:9999;
  mix-blend-mode: difference;
  opacity:0; transition: opacity .6s var(--t-soft);
}
body.is-cursor-on .cursor{ opacity:1; }
.cursor svg{ width:100%; height:100%; overflow:visible; }
.cursor__arm{
  stroke:#F4F1EA; stroke-width:1.0; stroke-linecap:butt;
  transition: transform .9s var(--t-cut);
  transform-box: fill-box; transform-origin:center;
}
.cursor__ticks line{ stroke:#F4F1EA; stroke-width:0.8; stroke-linecap:butt; opacity:.78; }
.cursor__pivot{ fill:#F4F1EA; }
.cursor__label{
  position:absolute; left:50%; top:calc(50% + 26px);
  transform: translate(-50%, 0);
  font-family:var(--mono); font-size:9.5px; font-weight:300;
  letter-spacing:.22em; text-transform:uppercase;
  color:#F4F1EA;
  opacity:0; transition: opacity .35s var(--t-soft);
  white-space:nowrap;
}

/* hovering an interactive: the calipers open, label wakes */
body.is-hover-link .cursor__arm--l{ transform: translateX(-6px); }
body.is-hover-link .cursor__arm--r{ transform: translateX( 6px); }
body.is-hover-link .cursor__arm--t{ transform: translateY(-6px); }
body.is-hover-link .cursor__arm--b{ transform: translateY( 6px); }
body.is-hover-link .cursor__label{ opacity:1; }

/* over the workpiece: cursor becomes a scribe-point */
body.is-on-work .cursor__arm{ opacity:.18; }
body.is-on-work .cursor__pivot{ r:2.2; }
body.is-on-work .cursor__label{ opacity:1; }

@media (hover:none), (pointer:coarse){
  .cursor{ display:none; }
  body{ cursor:auto; }
}

/* ─── Loader ─────────────────────────────────────────────────────────────── */
.loader{
  position:fixed; inset:0; z-index:80;
  background:var(--linen);
  display:grid; grid-template-rows: 1fr auto;
  align-items:center; justify-items:center;
  padding: 6vh var(--gutter) 5vh;
  transition: opacity 1.0s var(--t-soft), visibility 1.0s var(--t-soft);
}
body.is-booted .loader{ opacity:0; visibility:hidden; }
.loader__plate{
  display:flex; gap: clamp(28px, 4vw, 64px);
  align-items:flex-end; justify-content:center;
  flex-wrap:wrap;
}
.loader__rosette{
  width: clamp(220px, 26vw, 320px); height: clamp(220px, 26vw, 320px);
  overflow:visible;
}
.loader__bezel{ fill:none; stroke:var(--ink); stroke-width:0.6; opacity:.7; }
.loader__bezel--inner{ stroke-width:0.4; opacity:.45; }
#loader-guilloche path,
#loader-guilloche line{
  fill:none; stroke:var(--ink); stroke-width:0.45; stroke-linecap:round;
}
.loader__pivot{ fill:var(--ink); }
.loader__cutter{
  stroke: var(--steel); stroke-width:1.2; stroke-linecap:round;
  transform-origin: 0 0;
  animation: cutter 4s linear infinite;
}
@keyframes cutter{
  to{ transform: rotate(360deg); }
}

.loader__readout{
  list-style:none; margin:0; padding:0;
  font-family:var(--mono); font-size:11.5px; line-height:1.9;
  letter-spacing:.05em; color:var(--ink);
  min-width: 240px;
}
.loader__readout li{ display:flex; gap:18px; justify-content:space-between; border-bottom:1px solid rgba(26,26,28,.16); padding: 6px 0; }
.loader__readout li:last-child{ border-bottom:none; color:var(--steel); }
.loader__readout span:first-child{ text-transform:uppercase; font-weight:300; opacity:.7; }
.loader__caption{
  font-family:var(--serif); font-style:italic;
  font-size: clamp(13px, 1.4vw, 16px);
  margin: 28px 0 0; color:var(--ink-soft);
  letter-spacing:.005em;
  text-align:center; max-width: 52ch;
}

/* ─── Masthead ───────────────────────────────────────────────────────────── */
.bench-mast{
  position: fixed; top:0; left:0; right:0; z-index:30;
  display:grid; grid-template-columns: 1fr auto 1fr;
  align-items:start;
  padding: 22px var(--gutter) 18px;
  pointer-events:none;
  font-family:var(--mono); font-size:11px; font-weight:300;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink);
}
.bench-mast::before{
  content:""; position:absolute; inset:-2px 0 auto 0;
  height: calc(100% + 40px);
  background: linear-gradient(to bottom,
    var(--linen) 0%,
    var(--linen) 52%,
    rgba(230,225,214,.92) 78%,
    rgba(230,225,214,0) 100%);
  z-index:-1; pointer-events:none;
}
.bench-mast > div{ pointer-events:auto; }
.bench-mast__lt{ display:flex; flex-direction:column; gap:4px; }
.bench-mast__rt{ display:flex; flex-direction:column; gap:4px; align-items:flex-end; text-align:right; }
.bench-mast__line{ font-family:var(--serif); font-size: 14px; letter-spacing:.06em; text-transform:none; }
.bench-mast__sub{ opacity:.7; }
.bench-mast__centre{
  display:flex; align-items:center; justify-content:center;
  font-family:var(--mono);
}
.bench-mast__centre svg{ width:64px; height:18px; stroke:var(--ink); fill:none; }
.bench-mast__centre text{ font-size:9px; fill:var(--ink); font-family:var(--mono); }
.bench-mast__centre line{ stroke-width:0.6; }

@media (max-width: 760px){
  .bench-mast{ grid-template-columns: 1fr 1fr; }
  .bench-mast__centre{ display:none; }
}

/* ─── The Bench (main layout) ───────────────────────────────────────────── */
.bench{
  position: relative;
  display:grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(0, 1fr);
  column-gap: clamp(40px, 6vw, 112px);
  padding: 26vh var(--gutter) 18vh;
  max-width: var(--maxw);
  margin: 0 auto;
  z-index:5;
}

@media (max-width: 980px){
  .bench{
    grid-template-columns: 1fr;
    padding: 22vh var(--gutter) 14vh;
    row-gap: 10vh;
  }
}
@media (max-width: 640px){
  .bench{ padding: 20vh 22px 12vh; }
}

/* ─── Spec column (left) ─────────────────────────────────────────────────── */
.spec{ position: relative; }

.spec__opening{ margin-bottom: 20vh; }
@media (max-width:640px){ .spec__opening{ margin-bottom: 12vh; } }
.spec__rubric{
  font-family:var(--mono); font-size:11px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--ink); opacity:.7; margin: 0 0 28px;
}
.spec__title{
  font-family:var(--serif);
  font-weight:400;
  font-size: clamp(44px, 6.4vw, 96px);
  line-height: 1.02;
  letter-spacing: -0.005em;
  margin: 0 0 28px;
  color:var(--ink);
}
.spec__title .i{ font-style: italic; color:var(--steel); }
.spec__lede{
  font-family:var(--serif);
  font-size: clamp(16px, 1.35vw, 19px);
  line-height: 1.55;
  max-width: 44ch;
  margin: 0;
  color: var(--ink-soft);
}
.spec__lede .i{ font-style:italic; color:var(--ink); }

/* the bench notes */
.note{
  position: relative;
  padding: 0 0 13vh;
  margin: 0 0 9vh;
}
@media (max-width:640px){ .note{ padding-bottom: 10vh; margin-bottom: 6vh; } }
.note::after{
  content:""; position:absolute; left:0; right:0; bottom:0;
  height:1px; background: rgba(26,26,28,.22);
  transform-origin: left center; transform: scaleX(0);
  transition: transform 1.6s var(--t-cut) .15s;
}
.note.is-in::after{ transform: scaleX(1); }

.note__head{
  display:flex; align-items:center; gap: 14px;
  margin: 0 0 28px;
  font-family:var(--mono); font-size:11px; letter-spacing:.22em; text-transform:uppercase;
  color: var(--ink);
}
.note__no{ color:var(--steel); }
.note__rule{ flex:1 1 auto; height:1px; background:rgba(26,26,28,.36); }
.note__sub{ opacity:.78; }

.note__lead{
  font-family:var(--serif);
  font-size: clamp(20px, 2.05vw, 28px);
  line-height: 1.38;
  letter-spacing: -0.005em;
  margin: 0 0 24px;
  max-width: 38ch;
  color:var(--ink);
}
.note__lead .i{ font-style:italic; }
.note__lead .m{ font-family:var(--mono); font-size:.78em; letter-spacing:.04em; color:var(--ink-soft); }

.note__body{
  font-family:var(--serif);
  font-size: clamp(15px, 1.05vw, 17px);
  line-height: 1.66;
  max-width: 44ch;
  margin: 0 0 32px;
  color: var(--ink-soft);
}
.note__body .i{ font-style:italic; color:var(--ink); }
.note__body .m{ font-family:var(--mono); font-size:.82em; letter-spacing:.04em; color:var(--ink); }

.note__caliper{
  list-style:none; margin:0; padding: 0;
  display:grid; grid-template-columns: 1fr 1fr; gap: 0;
  border-top:1px solid rgba(26,26,28,.22);
  font-family:var(--mono); font-size: 10.5px; letter-spacing:.12em; text-transform:uppercase;
}
.note__caliper li{
  display:flex; justify-content:space-between; gap:12px;
  padding: 9px 0;
  border-bottom:1px solid rgba(26,26,28,.16);
}
.note__caliper li:nth-child(odd){ padding-right: clamp(12px, 2vw, 24px); border-right:1px solid rgba(26,26,28,.16); }
.note__caliper li:nth-child(even){ padding-left: clamp(12px, 2vw, 24px); }
.note__caliper span:first-child{ opacity:.6; font-weight:300; }
.note__caliper span:last-child{ color:var(--ink); text-align:right; font-weight:400; }

/* ─── Register ───────────────────────────────────────────────────────────── */
.register{ margin: 14vh 0 14vh; }
@media (max-width:640px){ .register{ margin: 10vh 0 10vh; } }
.register__head{
  display:flex; align-items:center; gap:14px; margin-bottom: 36px;
  font-family:var(--mono); font-size:11px; letter-spacing:.22em; text-transform:uppercase;
}
.register__no{ color:var(--steel); }
.register__rule{ flex:1; height:1px; background:rgba(26,26,28,.36); }
.register__sub{ opacity:.78; }

.register__list{ list-style:none; margin:0; padding:0; }
.r-row{
  position:relative;
  display:grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas: "ord name caliper" "ord meta caliper";
  align-items:baseline;
  gap: 6px clamp(20px, 3vw, 48px);
  padding: 22px 0 22px;
  border-bottom: 1px solid rgba(26,26,28,.22);
  transition: padding-left .9s var(--t-cut), color .9s var(--t-soft);
}
.r-row::before{
  content:""; position:absolute; left:0; right:0; bottom:-1px;
  height:1px; background:var(--ink);
  transform-origin: left center; transform: scaleX(0);
  transition: transform 1.1s var(--t-cut);
}
.r-row:hover{ padding-left: 24px; }
.r-row:hover::before{ transform: scaleX(1); }
.r-row__ord{
  grid-area: ord;
  font-family:var(--mono); font-size: 11px; letter-spacing:.18em;
  color:var(--steel); padding-top:6px; min-width: 2.4em;
}
.r-row__name{
  grid-area: name;
  font-family:var(--serif); font-weight:400;
  font-size: clamp(28px, 3.4vw, 46px); line-height:1.1;
}
.r-row__name .i{ font-style:italic; color:var(--ink-soft); }
.r-row__meta{
  grid-area: meta;
  font-family:var(--serif); font-style:italic;
  font-size: clamp(13px, 1vw, 15px);
  color:var(--ink-soft); max-width: 60ch;
}
.r-row__caliper{
  grid-area: caliper;
  font-family:var(--mono); font-size: 11px; letter-spacing:.12em;
  color: var(--ink); text-align:right; align-self:center;
  white-space:nowrap;
}
.r-row__caliper em{ font-style:normal; font-weight:300; opacity:.55; padding: 0 4px; }
@media (max-width: 760px){
  .r-row{ grid-template-columns: auto 1fr; grid-template-areas: "ord name" ". meta" ". caliper"; }
  .r-row__caliper{ text-align:left; }
}

/* ─── Colophon ───────────────────────────────────────────────────────────── */
.colophon{
  margin-top: 14vh;
  padding-top: 8vh;
  border-top: 1px solid rgba(26,26,28,.36);
}
@media (max-width:640px){ .colophon{ margin-top: 10vh; padding-top: 6vh; } }
.colophon__statement{
  font-family:var(--serif);
  font-size: clamp(28px, 3.4vw, 46px);
  line-height:1.18;
  letter-spacing:-0.005em;
  margin: 0 0 8vh;
  max-width: 22ch;
}
.colophon__write{
  border-bottom:none; color:var(--ink); position:relative; padding-bottom:2px;
}
.colophon__grid{
  list-style:none; margin: 0 0 6vh; padding:0;
  display:grid; grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top:1px solid rgba(26,26,28,.22);
  border-bottom:1px solid rgba(26,26,28,.22);
}
.colophon__grid li{
  display:flex; flex-direction:column; gap:6px;
  padding: 22px clamp(8px, 1.4vw, 20px) 22px 0;
  border-right:1px solid rgba(26,26,28,.16);
  font-family:var(--mono); font-size: 11px; letter-spacing:.14em; text-transform:uppercase;
}
.colophon__grid li:last-child{ border-right:none; padding-right:0; }
.colophon__grid li span:first-child{ opacity:.55; font-weight:300; }
.colophon__grid li span:nth-child(2){
  font-family:var(--serif); font-size:18px; letter-spacing:0; text-transform:none; color:var(--ink);
}
.colophon__grid li span:nth-child(3){ opacity:.7; }
.colophon__final{
  font-family:var(--serif); font-style:italic; font-size: 14px;
  color:var(--ink-soft); max-width:64ch; line-height:1.6; margin:0 0 6vh;
}
.colophon__final .i{ font-style:normal; color:var(--ink); }

.colophon__mark{
  display:flex; gap: 18px 28px;
  justify-content:space-between; align-items:baseline; flex-wrap:wrap;
  margin: 0; padding-top: 22px;
  border-top: 1px solid rgba(26,26,28,.22);
  font-family: var(--mono); font-size: 10.5px; letter-spacing:.18em; text-transform:uppercase;
  color: var(--ink);
}
.colophon__mark span{ display:inline-flex; gap:.5em; }
.colophon__mark .i{
  font-family: var(--serif); font-style: italic; font-size: 13px;
  letter-spacing: .02em; text-transform: none; color: var(--ink);
}

@media (max-width: 760px){
  .colophon__grid{ grid-template-columns: 1fr 1fr; }
  .colophon__grid li{ border-right:none; border-bottom:1px solid rgba(26,26,28,.16); }
  .colophon__grid li:nth-child(odd){ border-right:1px solid rgba(26,26,28,.16); padding-right: clamp(8px,1.4vw,20px); }
}

/* ─── Workpiece (right column, sticky) ───────────────────────────────────── */
.work{ position: relative; }
.work__sticky{
  position: sticky;
  top: 16vh;
  display:flex; flex-direction:column; gap: 22px;
  align-items:stretch;
}
.work__tag{
  display:flex; justify-content:space-between; gap:10px;
  margin: 0;
  font-family:var(--mono); font-size:11px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--ink);
}
.work__tag span:first-child{ opacity:.6; font-weight:300; }
#work-pattern{ color:var(--steel); }

.work__svg{
  width:100%; height:auto; aspect-ratio: 1/1;
  filter: drop-shadow(0 14px 40px rgba(26,26,28,.16)) drop-shadow(0 1px 0 rgba(244,241,234,.6));
  border-radius: 50%;
}

.work__bezel{ fill:none; stroke:var(--ink); stroke-width:0.7; opacity:.6; }
.work__chapter{ fill:none; stroke:var(--ink); stroke-width:0.4; opacity:.42; }
.work__pivot{ fill: var(--ink); }
.work__layer path,
.work__layer line{
  fill:none; stroke: var(--ink); stroke-width: 0.32; stroke-linecap: round;
  stroke-dasharray: 2200; stroke-dashoffset: 2200;
  transition: stroke-dashoffset 1.8s var(--t-cut), opacity .9s var(--t-soft);
  opacity: 0;
}
.work__layer.is-cut path,
.work__layer.is-cut line{ stroke-dashoffset: 0; opacity: .82; }

/* slightly different ink per layer to imply depth */
#layer-01 path, #layer-01 line{ stroke: rgba(26,26,28,.78); }
#layer-02 path, #layer-02 line{ stroke: rgba(31,58,95,.78); }
#layer-03 path, #layer-03 line{ stroke: rgba(26,26,28,.7); }

/* chapter ticks (filled dynamically) */
#chapter-marks line{ stroke: var(--ink); stroke-width: 0.6; opacity:.55; }

.work__scribe{
  fill:none; stroke: var(--steel); stroke-width: 0.8; opacity:.4;
  transition: opacity .4s var(--t-soft);
}

.work__readout{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns: 1fr 1fr; gap: 0;
  border-top: 1px solid rgba(26,26,28,.22);
  font-family:var(--mono); font-size: 10.5px; letter-spacing:.10em; text-transform:uppercase;
}
.work__readout li{
  display:flex; justify-content:space-between; gap:8px;
  padding: 9px 0;
  border-bottom: 1px solid rgba(26,26,28,.16);
}
.work__readout li:nth-child(odd){ padding-right: 14px; border-right:1px solid rgba(26,26,28,.16); }
.work__readout li:nth-child(even){ padding-left: 14px; }
.work__readout span:first-child{ opacity:.55; font-weight:300; }
.work__readout span:last-child{ color: var(--ink); font-weight:400; }

@media (max-width: 980px){
  .work{ order: -1; margin: 0 auto 4vh; width:100%; max-width: 520px; }
  .work__sticky{ position: static; gap:18px; }
  .work__svg{ max-width: 460px; margin: 0 auto; display:block; width:100%; }
  .work__readout{ max-width: 460px; margin: 0 auto; width:100%; }
}
@media (max-width: 520px){
  .work{ max-width: 100%; }
  .work__svg{ max-width: 86vw; }
}

/* reveal animation for body text — opacity only, no GPU layer-trap */
.note__lead, .note__body, .note__caliper li, .r-row, .colophon__grid li, .colophon__statement, .colophon__final{
  opacity: 0; transform: translateY(8px);
  transition: opacity 1.2s var(--t-soft), transform 1.2s var(--t-soft);
}
.is-in .note__lead, .is-in .note__body, .is-in .note__caliper li,
.r-row.is-in, .colophon.is-in .colophon__grid li,
.colophon.is-in .colophon__statement, .colophon.is-in .colophon__final{
  opacity: 1; transform: translateY(0);
}
.is-in .note__caliper li{ transition-delay: calc(var(--idx, 0) * 90ms + 200ms); }
.colophon.is-in .colophon__grid li{ transition-delay: calc(var(--idx,0) * 100ms + 200ms); }

/* reduce motion */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation-duration: 0s !important; transition-duration: .2s !important; }
  .bench-texture__sheen{ display:none; }
}