/* ==========================================================================
   Off the clock — page styles. Inherits the whole system from ../styles.css
   (tokens, fonts, nav, footer, .rv reveals). This file only adds the looser,
   photo-forward layout and the short thread "nod".
   ========================================================================== */

/* the page is warmer and roomier than home; no reserved thread channel */
body.otc{background:var(--paper)}
.otc .wrap{max-width:1180px;padding-left:max(var(--gut),78px);padding-right:max(var(--gut),78px)}

/* --- the nod to the thread: one short segment, then it fades ------------- */
#nod{position:absolute;top:0;left:0;width:100%;height:520px;z-index:0;pointer-events:none;overflow:visible}
#nod path{fill:none;stroke:var(--corn);stroke-width:1.1;stroke-linecap:round;opacity:.3}

/* --- intro -------------------------------------------------------------- */
.otc__intro{padding:clamp(92px,13vh,132px) 0 clamp(20px,3vh,36px);position:relative;z-index:1}
.otc__back{display:inline-flex;align-items:center;gap:9px;font-size:.6875rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--n-500);transition:color .35s var(--ease),gap .35s var(--expo)}
.otc__back .arw{transition:transform .35s var(--expo)}
.otc__back:hover{color:var(--blue-600)}
.otc__back:hover .arw{transform:translateX(-4px)}
.otc__hello{margin-top:clamp(20px,3vh,32px);font-size:clamp(1.9rem,4.4vw,3rem);line-height:1;color:var(--blue-500);transform:rotate(-1.4deg)}
.otc__lead{margin-top:clamp(16px,2.4vh,24px);max-width:46ch;font-size:clamp(.98rem,1.2vw,1.12rem);font-weight:300;line-height:1.66;color:var(--n-600)}

/* this page has no hero photo, so the shared paper-on-anything icon colour
   would be paper-on-paper: give it an ink default and let .stuck/.on-dark be */
.otc .nav:not(.stuck):not(.on-dark) .iconlink{color:var(--blue-600);filter:none}
.otc .nav:not(.stuck):not(.on-dark) .iconlink:hover{color:var(--blue-800)}

/* --- vignettes: alternating photo-left / photo-right -------------------- */
/* NO top padding: the pinned intro plus the tallest card must fit one short
   viewport, or the first card is clipped at load */
.otc__main{padding:0 0 clamp(26px,4vh,56px);position:relative;z-index:1}
/* each vignette is its own card: it lifts and settles as it comes into view */
/* cards sit as a deck: each overlaps the one before, and the card in the
   middle of the screen rises out of the stack and uncovers the next */
.vig{position:sticky;top:var(--stick,80px);z-index:var(--z,2);display:grid;grid-template-columns:clamp(230px,30vw,400px) minmax(0,1fr);gap:clamp(24px,3.6vw,56px);align-items:center;padding:clamp(26px,3.6vh,44px) clamp(22px,2.6vw,38px);margin:0;border-radius:20px;background:var(--paper);box-shadow:inset 0 0 0 1px var(--rule),0 -14px 30px -20px rgba(12,25,59,.28),0 18px 40px -30px rgba(12,25,59,.4);transition:none}
/* --- the reel: the intro stays put while the deck stacks under it ------- */
.otc__reel{position:relative}
.otc__intro{position:sticky;top:0;z-index:1;background:var(--paper);padding-top:clamp(72px,11vh,120px);padding-bottom:clamp(6px,1.2vh,20px)}
.otc__hello{font-size:clamp(1.6rem,4.6vh,2.6rem)}
.otc__lead{margin-top:clamp(8px,1.4vh,16px);font-size:clamp(.9rem,1.9vh,1.05rem)}

/* offsetTop on a sticky element reports its SHIFTED position, so the layout is
   read with pinning suspended for one frame */
#vignettes.measuring .vig{position:static!important}
#vignettes{margin-top:0;padding-top:0}
/* the last card needs no gap after it — nothing follows to slide over */
/* every card, including the last, gets the same dwell */
/* the dwell lives here, not in the cards' margins */
.vgap{height:70vh}
/* the floating home chip is mobile-only */
.otc__home{display:none}
.deckspacer{height:clamp(120px,22vh,260px)}
/* a clear break between the deck and the closing line */
.otc__close{position:relative;z-index:3;background:var(--paper);margin-top:0}
/* the combined card carries two headings, so it needs more room to breathe */
.vig--design-reading{padding-top:clamp(38px,5.6vh,66px);padding-bottom:clamp(38px,5.6vh,66px)}
.vig.near{box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--corn) 46%,transparent),0 -14px 30px -20px rgba(12,25,59,.3),0 44px 80px -46px rgba(12,25,59,.5)}
.vig--solo{grid-template-columns:minmax(0,1fr)}
.vig--solo .vig__copy{grid-column:1}
/* the template itself flips: order alone cannot swap column WIDTHS, so the
   copy used to land in the narrow photo column on every even card */
/* both pinned to row 1: columns alone leave the row auto, and sparse
   auto-placement will not backtrack, so the copy fell to a second row */
.vig__fig{grid-column:1;grid-row:1}
.vig__copy{grid-column:2;grid-row:1}
.vig:nth-child(even){grid-template-columns:minmax(0,1fr) clamp(230px,30vw,400px)}
.vig:nth-child(even) .vig__fig{grid-column:2}
.vig:nth-child(even) .vig__copy{grid-column:1}
.vig__fig{margin:0;position:relative}
/* no crop: the image keeps its own proportions and the mask follows it */
.vig__fig .mask{display:block;overflow:hidden;border-radius:14px;background:var(--paper-100);position:relative}
.vig__fig img{display:block;width:100%;height:auto;object-fit:contain;filter:saturate(1.02) contrast(1.01)}
/* a stack: every shot fills the same box and the scroll cross-fades them */
.vig--stack .vig__fig .mask{aspect-ratio:1 / 1}
.vig--stack .vig__fig img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .45s var(--ease)}
.vig__dots{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);display:flex;gap:5px;z-index:3;padding:5px 8px;border-radius:999px;background:color-mix(in oklab,var(--paper) 72%,transparent);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.vig__dots b{display:block;width:5px;height:5px;border-radius:50%;background:color-mix(in oklab,var(--blue-700) 32%,transparent);transition:background .4s var(--ease),transform .4s var(--expo)}
.vig__dots b.on{background:var(--blue-600);transform:scale(1.25)}
/* these are handwritten notes, not the shared uppercase figcaption labels —
   both properties must be reset or ../styles.css wins */
/* handwriting sits where a margin note would: a different corner each time,
   overlapping the photo's edge on a small paper chip so it stays legible */
.vig__fig{position:relative}
.vig__cap{text-transform:none;letter-spacing:-.005em;margin:0;font-family:var(--hand);font-size:clamp(1.16rem,1.5vw,1.42rem);line-height:1.05;color:var(--blue-500);position:absolute;z-index:2;padding:3px 9px;border-radius:8px;background:color-mix(in oklab,var(--paper) 88%,transparent);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);white-space:nowrap}
/* four resting places, cycled so no two neighbours match */
.vig:nth-child(4n+1) .vig__cap{bottom:-10px;left:-12px;transform:rotate(-2.4deg)}
.vig:nth-child(4n+2) .vig__cap{top:-12px;right:-14px;transform:rotate(2deg)}
.vig:nth-child(4n+3) .vig__cap{bottom:14px;right:-18px;transform:rotate(-1.4deg)}
.vig:nth-child(4n) .vig__cap{top:16px;left:-16px;transform:rotate(1.8deg)}
.vig__copy p.vig__cap--inline{font-size:clamp(1.16rem,1.5vw,1.42rem);color:var(--blue-500)}
.vig__cap--inline{position:static;padding:0;background:none;backdrop-filter:none;-webkit-backdrop-filter:none;margin-top:16px;display:inline-block;transform:rotate(-1.6deg)}

.vig__copy h2{font-size:clamp(1.22rem,1.9vw,1.6rem)}
/* pill tags, same treatment as the work rows on the landing page */
.vig__tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:15px}
.vig__tags span{padding:5px 11px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--line);background:transparent;font-size:.6875rem;color:var(--fg-3);transition:box-shadow .45s var(--ease),background-color .45s var(--ease),color .45s var(--ease)}
.vig__tags span.filled{box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--corn) 55%,transparent);background:color-mix(in oklab,var(--corn) 12%,transparent);color:var(--blue-700)}
.vig__tagsnote{margin-top:14px;font-size:.75rem;letter-spacing:.02em;color:var(--fg-3)}
.vig__h2b{margin-top:clamp(20px,2.6vh,30px);padding-top:clamp(16px,2vh,22px);border-top:1px solid var(--rule)}
.vig__copy p{margin-top:13px;max-width:52ch;font-size:clamp(.9rem,1.05vw,.98rem);font-weight:300;line-height:1.72;color:var(--n-600)}
/* no rule above the headings — the divider is only used between the two
   headings on the Design & Reading / Projects card (.vig__h2b) */
.vig__copy i{display:none}

/* the photos lead: they run a little larger and warmer than on home */
/* smaller now that they sit inside cards */
/* width comes from the column, never from the (possibly pending) image */
.vig__fig{width:100%;max-width:clamp(230px,30vw,400px)}
.vig__fig .mask{width:100%}
.vig:nth-child(even) .vig__fig{margin-left:auto}
/* the clip keeps its own portrait proportion too */
.vig--clip .vig__fig img{object-position:50% 50%}
/* the family framing lives in the ASSET, not in object-position: solo cards
   use object-fit:contain against the image's own ratio, so there is no
   overflow for object-position to shift. */
/* the multi-shot photos are clickable: advance one shot per click */
.vig--stack .vig__fig{cursor:pointer}
.vig--stack .vig__fig:focus-visible{outline:2px solid var(--blue-500);outline-offset:4px}
.vig__fig--clip video{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 40%}

/* --- closing ------------------------------------------------------------ */
.otc__close{position:relative;z-index:3;background:var(--paper);padding:clamp(30px,4.5vh,56px) 0 clamp(48px,8vh,90px);border-top:1px solid var(--rule);position:relative;z-index:1}
.otc__closeline{font-size:clamp(1.1rem,2.2vw,1.75rem);line-height:1.1;color:var(--blue-500);white-space:nowrap;transform:rotate(-1deg)}
.otc__closelinks{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 14px;margin-top:clamp(24px,3.6vh,38px);font-size:.9375rem}
.otc__closelinks .btn,.otc__closelinks .btn:hover{color:var(--paper);border-bottom:0}
/* the small mail glyph, same mark as the footer icons at 14px */
.btn__ico{width:14px;height:14px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* --- responsive --------------------------------------------------------- */
@media (max-width:860px){
  .otc__intro{position:static}
  /* no pinning on a phone: the cards simply flow, one after another. The
     dwell spacers exist only to give the desktop deck its scroll runway —
     on mobile they are pure empty screens. */
  .vgap{display:none}
  /* the floating home chip is mobile-only */
.otc__home{display:none}
.deckspacer{height:0}
  .vig{position:static!important;transform:none!important;min-height:0!important;
    grid-template-columns:1fr;gap:20px;padding:clamp(24px,3.6vh,34px) clamp(18px,4vw,24px);
    margin:0 0 clamp(16px,2.6vh,26px)!important}
  /* photo above text, always */
  .vig,.vig:nth-child(even){grid-template-columns:1fr}
  .vig .vig__fig,.vig:nth-child(even) .vig__fig{grid-column:1;grid-row:auto;order:1}
  .vig .vig__copy,.vig:nth-child(even) .vig__copy{grid-column:1;grid-row:auto;order:2}

  .otc .wrap{padding-left:max(var(--gut),58px);padding-right:max(var(--gut),58px)}
  #nod{height:340px}

  /* a persistent way home, since there is no thread to follow on a phone */
  .otc__home{display:grid;position:fixed;left:14px;bottom:14px;z-index:40;display:grid;place-items:center;
    width:42px;height:42px;border-radius:50%;background:rgba(246,244,238,.92);
    box-shadow:0 0 0 1px var(--rule),0 8px 20px -12px rgba(12,25,59,.5);
    backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
    color:var(--blue-700);opacity:0;pointer-events:none;transform:translateY(6px);
    transition:opacity .45s var(--ease),transform .45s var(--expo)}
  .otc__home.on{opacity:1;pointer-events:auto;transform:none}
  .otc__home svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;
    stroke-linecap:round;stroke-linejoin:round}

  /* swipeable photos */
  .vig--stack .vig__fig{touch-action:pan-y;cursor:pointer}

  /* rubber-band overscroll must not flash paper below the ink footer */
  html{background:var(--ink)}
}
@media (max-width:640px){
  .otc .wrap{padding-left:var(--gut);padding-right:var(--gut)}
  .otc__intro{padding-top:92px}
  .otc__hello{font-size:clamp(2.1rem,11vw,2.8rem)}
}

@media (prefers-reduced-motion:reduce){
  .vig{position:static;transform:none!important;margin-bottom:clamp(16px,2.4vh,28px)}
  .vig--stack .vig__fig img+img{display:none}
}

/* nothing below the deck may let the pinned intro show through */
.otc__page .foot{position:relative;z-index:3}