/* THE TOOLKIT — THE DOCUMENT REGISTER (About, 2026-07-16).
   The About page is set as the agreement itself: cover, recitals,
   terms, schedule, execution. Paper first; photography sits in the
   document as exhibits. One new behaviour file (js/about.js) draws
   the ink — the signature is an object that signs itself once, in
   place. Depends only on main.css tokens (vars, header, footer,
   r1–r4, wrap, grain, data-settle). No inline scripts beyond the
   two hashed sitewide blocks. */

/* the document owns its own vertical meter */
.doc{padding-block:clamp(72px,10vw,132px)}
.doc[id]{scroll-margin-top:96px}

/* shared document furniture */
.doc-label{font-family:var(--mono);font-size:.625rem;letter-spacing:.18em;text-transform:uppercase;color:var(--brass);display:block}
.doc-title{font-family:var(--sans);font-weight:300;font-size:clamp(1.35rem,2.8vw,1.95rem);letter-spacing:.14em;text-transform:uppercase;line-height:1.3;margin-top:14px;max-width:18em}
.doc-intro{margin-top:18px;max-width:38em;font-size:1rem;line-height:1.8;color:var(--green)}

/* ============ I · the cover ============ */
.cv{position:relative;overflow:hidden;display:flex;align-items:center;
  min-height:calc(100svh - 85px);padding-block:clamp(56px,9vh,110px)}
@media(max-width:1039px){.cv{min-height:calc(100svh - 54px)}}
.cv .wrap{position:relative;z-index:2;width:100%}
.cv-kick{font-family:var(--mono);font-size:.6875rem;letter-spacing:.18em;text-transform:uppercase;color:var(--stone)}
.cv h1{font-family:var(--serif);font-style:italic;font-weight:300;letter-spacing:.005em;
  font-size:clamp(2.7rem,6.8vw,5.1rem);line-height:1.08;margin-top:22px;max-width:10.5em;color:var(--green);text-wrap:balance}
.cv-stand{margin-top:clamp(24px,3.5vh,36px);max-width:37em;font-size:1.0625rem;line-height:1.85;color:var(--green)}
.cv-stand em{font-style:normal}

/* the ghost — the same signature, at the scale of a watermark
   (Brittany Signature Script, outlined to artwork — no font is shipped).
   Owner ruling 2026-07-16: the whole signature sits INSIDE the frame,
   never cropped by the edge, on every screen. */
.cv-ghost{position:absolute;z-index:1;pointer-events:none;
  right:clamp(24px,4vw,64px);top:clamp(24px,8vh,110px);width:min(50vw,700px);height:auto;
  fill:var(--green);fill-opacity:.09}

/* contents — the agreement is scannable before it is read */
.cv-toc{margin-top:clamp(44px,7vh,76px);border-top:1px solid var(--hairline);
  display:grid;grid-template-columns:repeat(4,1fr);gap:16px 24px;padding-top:20px}
@media(max-width:720px){.cv-toc{grid-template-columns:1fr 1fr}}
.cv-toc a{display:block;text-decoration:none;padding-block:4px}
.cv-toc .n{font-family:var(--mono);font-size:.625rem;letter-spacing:.14em;color:var(--brass);display:block}
.cv-toc .t{font-family:var(--sans);font-weight:400;font-size:.6875rem;letter-spacing:.24em;text-indent:0;
  text-transform:uppercase;color:var(--green);display:inline-block;margin-top:8px;position:relative;padding-bottom:5px}
.cv-toc .t::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:var(--brass);
  transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease)}
.cv-toc a:hover .t::after,.cv-toc a:focus-visible .t::after{transform:scaleX(1)}
.cv-toc .d{display:block;font-size:.8125rem;line-height:1.6;color:var(--stone);margin-top:6px;max-width:16em}

/* ============ II · recitals ============ */
.doc-recitals .wrap{display:grid;grid-template-columns:1fr;gap:clamp(40px,6vw,96px);align-items:start}
@media(min-width:980px){.doc-recitals .wrap{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}}
.wh{margin-top:clamp(30px,4vw,44px);display:grid;gap:clamp(26px,3.6vw,38px)}
.wh .lead{font-family:var(--mono);font-size:.625rem;letter-spacing:.2em;text-transform:uppercase;color:var(--brass);display:block;margin-bottom:10px}
.wh p{font-family:var(--serif);font-style:italic;font-weight:300;letter-spacing:.005em;
  font-size:clamp(1.15rem,1.9vw,1.4rem);line-height:1.6;color:var(--green);max-width:30em}
.wh-turn{border-top:1px solid var(--hairline);padding-top:clamp(26px,3.6vw,38px)}
.wh-turn p{font-size:clamp(1.3rem,2.3vw,1.7rem);max-width:26em}
.doc-recitals figure{margin:0;position:sticky;top:calc(85px + 32px)}
@media(max-width:979px){.doc-recitals figure{position:static}}
.doc-recitals img{width:100%;height:auto;display:block;border:1px solid var(--brass-line)}
.doc-recitals figcaption{margin-top:12px;font-family:var(--mono);font-size:.625rem;letter-spacing:.14em;text-transform:uppercase;color:var(--stone);line-height:1.9}

/* ============ III · the terms ============ */
.doc-terms{background:var(--bone)}
.doc-terms .head{margin-bottom:clamp(36px,5vw,56px)}
.cls{border-top:1px solid var(--hairline)}
.cl{display:grid;grid-template-columns:44px minmax(0,1fr);gap:14px 18px;
  padding:clamp(26px,3.6vw,40px) 0;border-bottom:1px solid var(--hairline)}
@media(min-width:880px){.cl{grid-template-columns:72px 280px minmax(0,1fr);gap:24px 40px}}
.cl .n{font-family:var(--mono);font-size:.6875rem;letter-spacing:.14em;color:var(--brass);padding-top:5px}
.cl .n svg{display:block;width:26px;height:auto;margin-top:10px;overflow:visible;
  fill:var(--brass);opacity:.85}
.cl h3{font-family:var(--sans);font-weight:300;font-size:.9375rem;letter-spacing:.2em;text-indent:.2em;
  text-transform:uppercase;line-height:1.7;padding-top:2px;color:var(--green)}
.cl p{font-size:1rem;line-height:1.8;color:var(--green);max-width:58ch}
@media(max-width:879px){.cl h3{grid-column:2}.cl p{grid-column:2}}

/* a plate bound into the terms — evidence, not decoration */
.cl-plate{display:grid;grid-template-columns:1fr;gap:14px 40px;padding:clamp(30px,4.5vw,52px) 0;border-bottom:1px solid var(--hairline)}
@media(min-width:880px){.cl-plate{grid-template-columns:72px minmax(0,1fr) minmax(0,1fr);align-items:end}
  .cl-plate figure{grid-column:2/4}}
.cl-plate figure{margin:0}
.cl-plate img{width:100%;height:auto;display:block;border:1px solid var(--brass-line);aspect-ratio:21/9;object-fit:cover}
.cl-plate figcaption{margin-top:12px;font-family:var(--mono);font-size:.625rem;letter-spacing:.14em;text-transform:uppercase;color:var(--stone);line-height:1.9}

/* ============ the quiet — one dark leaf bound into the paper ============ */
.dq{position:relative;min-height:78svh;overflow:hidden;background:#141F19;padding:0;display:flex;align-items:flex-end}
.dq img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.dq .scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,31,25,.16) 0%,rgba(20,31,25,.05) 40%,rgba(20,31,25,.66) 100%)}
.dq .inner{position:relative;z-index:2;padding:0 var(--mx) clamp(52px,9vh,96px);max-width:var(--maxw);margin-inline:auto;width:100%}
.dq .pull{font-family:var(--serif);font-style:italic;font-weight:300;font-size:clamp(1.45rem,3.2vw,2.15rem);
  line-height:1.4;color:var(--bone);max-width:22em;text-wrap:balance}
.dq .cap{display:block;margin-top:18px;font-family:var(--mono);font-size:.625rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(236,231,220,.62)}

/* ============ IV · the schedule ============ */
.doc-schedule .head{margin-bottom:clamp(36px,5vw,56px)}
.xgrid{display:grid;grid-template-columns:1fr;gap:clamp(28px,3.5vw,44px)}
@media(min-width:880px){.xgrid{grid-template-columns:1fr 1fr 1fr}}
.x{display:block;text-decoration:none;color:inherit}
.x figure{margin:0;overflow:hidden}
.x img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;border:1px solid var(--brass-line);transition:transform 1.4s var(--ease)}
.x:hover img,.x:focus-visible img{transform:scale(1.03)}
.x .xm{display:block;margin-top:14px;font-family:var(--mono);font-size:.625rem;letter-spacing:.14em;text-transform:uppercase;color:var(--stone);line-height:1.9}
.x .xt{display:inline-block;margin-top:8px;font-family:var(--sans);font-weight:300;font-size:1rem;letter-spacing:.14em;text-transform:uppercase;color:var(--green);position:relative;padding-bottom:6px}
.x .xt::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:var(--brass);
  transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease)}
.x:hover .xt::after,.x:focus-visible .xt::after{transform:scaleX(1)}
.x .xd{display:block;margin-top:8px;font-size:.9375rem;line-height:1.7;color:var(--green);max-width:34ch}

/* the reserved page */
.x-res{border:1px solid var(--hairline);position:relative;display:flex;flex-direction:column;
  padding:26px 26px 24px;min-height:100%;text-align:center;transition:border-color .3s var(--ease)}
.x-res:hover,.x-res:focus-within{border-color:var(--brass)}
.x-res::before{content:'';position:absolute;inset:10px;border:1px solid var(--hairline);pointer-events:none}
.x-res .xm{margin-top:0;text-align:left}
.x-res .seal{width:52px;height:52px;opacity:.16;margin:auto auto 0}
.x-res .xi{font-family:var(--serif);font-style:italic;font-weight:300;font-size:1.2rem;line-height:1.5;color:var(--green);
  max-width:15em;margin:22px auto 0}
.x-res .xfoot{margin:auto auto 0;padding-top:30px}
@media(max-width:879px){.x-res{min-height:380px}}

/* ============ V · execution ============ */
.doc-exec .head{margin-bottom:clamp(36px,5vw,56px)}
.xc-say{font-family:var(--serif);font-style:italic;font-weight:300;font-size:clamp(1.3rem,2.4vw,1.75rem);line-height:1.5;
  color:var(--green);max-width:26em;margin-top:18px}
.xc-panel{position:relative;margin-top:clamp(36px,5vw,56px);border:1px solid var(--hairline);padding:clamp(28px,5vw,68px)}
.xc-panel::before{content:'';position:absolute;inset:10px;border:1px solid var(--hairline);pointer-events:none}
.xc-grid{position:relative;display:grid;grid-template-columns:1fr;gap:clamp(48px,7vw,72px)}
@media(min-width:880px){.xc-grid{grid-template-columns:1fr 1fr;gap:clamp(64px,9vw,140px)}}
.xc-col{position:relative}
.xc-col .lab{font-family:var(--mono);font-size:.625rem;letter-spacing:.18em;text-transform:uppercase;color:var(--stone)}
.xc-sig{height:clamp(110px,15vw,150px);display:flex;align-items:flex-end;margin-top:14px}
.xc-sig svg{height:100%;width:auto;max-width:100%;overflow:visible;display:block;
  fill:var(--green);fill-opacity:.92}
.xc-rule{border-bottom:1px solid rgba(46,74,56,.55);margin-top:6px}
.xc-sub{margin-top:12px;font-family:var(--mono);font-size:.625rem;letter-spacing:.14em;text-transform:uppercase;color:var(--stone);line-height:2}
.xc-open{font-family:var(--serif);font-style:italic;font-weight:300;font-size:1.1rem;color:var(--stone)}
.xc-acts{display:flex;flex-wrap:wrap;align-items:center;gap:18px 32px;margin-top:clamp(32px,5vw,48px)}
.xc-acts .tel{font-family:var(--mono);font-size:.6875rem;letter-spacing:.14em;color:var(--green)}
.xc-acts .em{font-size:.6875rem;letter-spacing:.24em;text-transform:uppercase}
.xc-visit{margin-top:26px;font-size:.9375rem;line-height:1.8;color:var(--green);max-width:44em}
.xc-parts{margin-top:clamp(36px,5vw,52px);padding-top:20px;border-top:1px solid var(--hairline);
  font-family:var(--mono);font-size:.625rem;letter-spacing:.12em;text-transform:uppercase;color:var(--stone);line-height:2.1}

/* ============ ink — the signature writes itself, left to right ============ */
/* The outlined name is revealed by a travelling clip, the way a pen crosses
   the line. Without JS (or with reduced motion) the ink simply sits complete. */
.js .sgf{clip-path:inset(-12% 103% -12% -3%)}
.js .sgf.sgf-run{clip-path:inset(-12% -3% -12% -3%);
  transition:clip-path var(--sgf-dur,1.5s) cubic-bezier(.42,.02,.34,1) var(--sgf-delay,0s)}
@media(prefers-reduced-motion:reduce){
  .js .sgf{clip-path:none}
  .js .sgf.sgf-run{transition:none}
}

/* ============ small screens ============ */
@media(max-width:720px){
  .cv h1{font-size:clamp(2.3rem,11vw,2.9rem)}
  /* phones: whole signature in frame, 20% down from 90vw (owner, 2026-07-16) */
  .cv-ghost{right:4vw;width:72vw;top:11vh}
  .cv-toc .d{display:none}
  .xc-panel{padding:24px 20px}
}