/* ==========================================================================
   cranialwork.co.uk - THE TIDE
   One stylesheet. Edit the tokens and the whole site moves.

   The page is water with light in it. A deep sea field breathes on an 8.6
   second cycle, which sits inside the range Caroline describes her hands
   reading. Photographs are discs. Rings spread out from under the hands.
   Gold is the only thing that asks to be clicked.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root{
  /* --- Sea and sunlight. Depth below, light above, gold where it breaks. --- */
  --abyss:      #06282B;
  --deep:       #0B3C40;
  --sea:        #11585C;
  --shallow:    #1E7F7B;
  --surf:       #4FB3A3;
  --glass:      #9FD9C9;
  --sun:        #F0B03C;
  --sun-soft:   #F6CE7E;
  --coral:      #E2643F;
  --sun-lift:   #FBE3B4;   /* link hover on a deep ground */

  --chalk:      #F3F7F4;
  --chalk-lift: #FAFCFA;
  --chalk-sink: #E6EDE8;

  --ink:        #08211F;
  --ink-soft:   #3C5A56;
  --ink-faint:  #5A736E;      /* 4.72:1 on chalk */
  --ink-print:  #000000;      /* print only */

  --on-deep:       rgba(243,247,244,.95);
  --on-deep-soft:  rgba(243,247,244,.74);
  --on-deep-faint: rgba(243,247,244,.54);

  --hair:       rgba(159,217,201,.24);
  --hair-ink:   #CBD9D3;

  /* --- Faces. Each has one job. --- */
  --f-display:'Marcellus',Georgia,'Times New Roman',serif;   /* titles, numerals */
  --f-body:   'Spectral',Georgia,'Times New Roman',serif;    /* all running prose */
  --f-label:  'Jost',-apple-system,'Helvetica Neue',sans-serif; /* labels, controls */

  /* --- Scale --- */
  --t-hero:   clamp(31px,4.1vw,56px);
  --t-over:   clamp(30px,3.2vw,48px);   /* the overline, and section headers */
  --t-lead:   clamp(21px,2.05vw,29px);
  --t-ask:    clamp(22px,2.4vw,33px);
  --t-sub:    clamp(20px,1.95vw,28px);  /* the line under the headline */
  --t-opening:clamp(23px,2.5vw,34px);   /* a large opening line */
  --t-band:   clamp(26px,3.4vw,46px);   /* a banner band */
  --t-figure: clamp(25px,2.5vw,36px);   /* a figure in the tide table */
  --t-quote:  clamp(17px,1.6vw,23px);   /* a case story */
  --t-mast:   clamp(19px,1.7vw,23px);   /* the name in the masthead */
  --t-body:   19px;
  --t-small:  15.5px;
  --t-label:  13px;
  --t-micro:  12.5px;

  /* --- Space --- */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:48px; --s8:64px; --s9:88px; --s10:120px;
  --section-y: clamp(72px,9.5vw,140px);
  --gutter:    clamp(22px,5vw,64px);
  --measure:   66ch;

  --ease:cubic-bezier(.22,.61,.36,1);
  --dur:250ms;
  --pulse:8.6s;    /* the rhythm everything on this site moves at */
}

/* --------------------------------------------------------------------------
   2. RESET AND BROWSER SURFACES
   The parts nobody draws still belong to the design.
   -------------------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scrollbar-color:var(--sea) var(--chalk-sink);
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;background:var(--chalk);color:var(--ink);
  font-family:var(--f-body);font-size:var(--t-body);font-weight:300;line-height:1.78;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
::selection{background:var(--sun);color:var(--abyss)}
::-webkit-scrollbar{width:12px;height:12px}
::-webkit-scrollbar-track{background:var(--chalk-sink)}
::-webkit-scrollbar-thumb{background:var(--sea);border:3px solid var(--chalk-sink);border-radius:999px}
::-webkit-scrollbar-thumb:hover{background:var(--abyss)}

:focus-visible{outline:2px solid var(--sun);outline-offset:3px;border-radius:2px}

img{max-width:100%;height:auto;display:block}
h1,h2,h3,h4{margin:0;font-weight:400;text-wrap:balance}
p{margin:0 0 1.15em}p:last-child{margin-bottom:0}
figure{margin:0}
figcaption{text-align:left}

a{color:var(--sea);text-decoration-thickness:1px;text-underline-offset:.2em;
  text-decoration-color:rgba(17,88,92,.42);transition:color var(--dur) var(--ease)}
a:hover{text-decoration-color:currentColor;text-decoration-thickness:2px}
.on-deep a{color:var(--sun-soft);text-decoration-color:rgba(246,206,126,.45)}
.on-deep a:hover{color:var(--sun-lift)}

.skip{position:absolute;left:-9999px;background:var(--abyss);color:var(--on-deep);
  padding:var(--s3) var(--s5);font-family:var(--f-label);font-size:var(--t-micro);
  letter-spacing:.2em;text-transform:uppercase;text-decoration:none}
.skip:focus{left:var(--s4);top:var(--s4);z-index:200}

/* --------------------------------------------------------------------------
   3. LAYOUT
   -------------------------------------------------------------------------- */
.wrap{width:100%;max-width:1280px;margin-inline:auto;padding-inline:var(--gutter)}
.wrap--narrow{max-width:860px}
.section{padding-block:var(--section-y)}
.section--tight{padding-block:clamp(52px,6.5vw,92px)}
.prose{max-width:var(--measure)}
.prose p+p{margin-top:1.15em}

.field{background:var(--deep);color:var(--on-deep)}
.field--abyss{background:var(--abyss);color:var(--on-deep)}
.field--sea{background:var(--sea);color:var(--on-deep)}

/* --------------------------------------------------------------------------
   4. TYPE ROLES
   -------------------------------------------------------------------------- */
.display{font-family:var(--f-display);line-height:1.1;letter-spacing:.005em;font-size:var(--t-hero)}
.display em{font-style:italic;font-family:var(--f-body);font-weight:300;color:var(--sun-soft)}
.on-chalk .display em{color:var(--shallow)}

/* The big yellow line. Used for the overline and for section headers, so the
   page has one recurring voice at one recurring size. */
.over{font-family:var(--f-display);font-size:var(--t-over);line-height:1.24;
  letter-spacing:.02em;color:var(--sun-soft);margin-bottom:clamp(18px,2vw,30px)}
.over em{font-style:italic;font-family:var(--f-body);font-weight:300}
.over--ink{color:var(--sea)}
.over--oneline{white-space:nowrap;font-size:clamp(24px,2.7vw,38px)}
@media(max-width:430px){.over--oneline{white-space:normal}}
.over--free{margin-bottom:0}

.lead{font-size:var(--t-lead);line-height:1.5;color:var(--ink-soft)}
.on-deep .lead{color:var(--on-deep-soft)}

.ask{font-family:var(--f-display);font-size:var(--t-ask);line-height:1.34;color:var(--sea)}
.on-deep .ask{color:var(--sun-soft)}

.label{font-family:var(--f-label);font-size:var(--t-label);font-weight:400;
  letter-spacing:.2em;text-transform:uppercase;color:var(--ink-faint)}
.on-deep .label{color:var(--on-deep-faint)}

.rule{height:1px;background:linear-gradient(90deg,var(--surf),rgba(79,179,163,0));
  border:0;margin:clamp(28px,3.4vw,44px) 0}
.on-deep .rule{background:linear-gradient(90deg,var(--glass),rgba(159,217,201,0))}

/* --------------------------------------------------------------------------
   5. THE TIDE FIELD
   The water, and the rhythm it breathes at. Used on the hero and again, at
   lower strength, behind the case stories, so the page keeps one pulse.
   -------------------------------------------------------------------------- */
.tide{position:relative;overflow:hidden;isolation:isolate;color:var(--on-deep);
  background:
    radial-gradient(120% 90% at 78% 6%, rgba(240,176,60,.34) 0%, rgba(240,176,60,0) 52%),
    linear-gradient(174deg, var(--shallow) 0%, var(--sea) 34%, var(--deep) 66%, var(--abyss) 100%)}
.tide--hero{min-height:100svh;display:flex;flex-direction:column}
.tide--hero .tide__inner{flex:1;display:flex;flex-direction:column}
.tide--hero .hero{flex:1;align-content:center}
.tide--panel{background:
    radial-gradient(110% 80% at 18% 0%, rgba(240,176,60,.18) 0%, rgba(240,176,60,0) 56%),
    linear-gradient(168deg, var(--sea) 0%, var(--deep) 52%, var(--abyss) 100%)}

.caustic{position:absolute;inset:-40%;background-size:cover;background-repeat:no-repeat;
  background-position:center;pointer-events:none;mix-blend-mode:soft-light;opacity:.72;
  z-index:0;will-change:transform,filter}
.caustic--a{animation:breatheA var(--pulse) var(--ease) infinite}
.caustic--b{animation:breatheB var(--pulse) var(--ease) infinite;opacity:.44}
@keyframes breatheA{
  0%,100%{transform:scale(1)     translate3d(0,0,0);       filter:brightness(1)}
  50%    {transform:scale(1.055) translate3d(1.6%,-1.1%,0); filter:brightness(1.2)}
}
@keyframes breatheB{
  0%,100%{transform:scale(1.045) translate3d(0,0,0) rotate(.6deg);        filter:brightness(1.12)}
  50%    {transform:scale(1)     translate3d(-1.4%,1.3%,0) rotate(0deg);  filter:brightness(.96)}
}
.surface-light{position:absolute;left:-20%;right:-20%;top:0;height:58%;pointer-events:none;z-index:0;
  background:linear-gradient(180deg,rgba(246,206,126,.3) 0%,rgba(159,217,201,.1) 46%,rgba(0,0,0,0) 100%);
  animation:swell var(--pulse) var(--ease) infinite}
@keyframes swell{0%,100%{opacity:.75;transform:translateY(0)}50%{opacity:1;transform:translateY(18px)}}
@media(prefers-reduced-motion:reduce){
  .caustic--a,.caustic--b{animation:none;opacity:.5;transform:none}
  .surface-light{animation:none}
}
.tide__inner{position:relative;z-index:3}

/* --------------------------------------------------------------------------
   6. MASTHEAD
   -------------------------------------------------------------------------- */
.mast{position:relative;z-index:40}
.mast__inner{display:flex;align-items:baseline;justify-content:space-between;
  gap:var(--s5) clamp(32px,4vw,64px);flex-wrap:wrap;
  padding-block:clamp(28px,3.4vw,44px) clamp(48px,6vw,92px)}
.mast__name{font-family:var(--f-display);font-size:var(--t-mast);letter-spacing:.14em;
  text-transform:uppercase;color:var(--on-deep);text-decoration:none}
.mast__post{font-family:var(--f-label);font-size:clamp(15px,1.35vw,18.5px);font-weight:400;
  letter-spacing:.03em;
  text-transform:none;   /* BSc is not BSC */
  color:var(--on-deep-soft);margin-left:10px;white-space:nowrap}
a.mast__name:hover .mast__post{color:var(--on-deep-soft)}
a.mast__name{color:var(--on-deep)}
a.mast__name:hover{color:var(--sun-soft)}
.nav{display:flex;gap:clamp(16px,2.3vw,36px);flex-wrap:wrap;align-items:baseline}
.nav a{font-family:var(--f-label);font-size:var(--t-micro);letter-spacing:.2em;text-transform:uppercase;
  color:var(--on-deep-soft);text-decoration:none;padding-bottom:4px;border-bottom:1px solid transparent;
  transition:color var(--dur) var(--ease),border-color var(--dur) var(--ease)}
.nav a:hover{color:var(--on-deep);border-bottom-color:var(--sun)}
.nav a[aria-current="page"]{color:var(--sun-soft);border-bottom-color:var(--sun-soft)}
.menu-btn{display:none}

/* --------------------------------------------------------------------------
   7. HERO
   -------------------------------------------------------------------------- */
.hero{display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);
  gap:clamp(32px,5vw,80px);align-items:center;
  padding-top:clamp(18px,2.4vw,40px);
  padding-bottom:clamp(34px,4vw,56px)}
.hero h1{max-width:19ch;color:var(--on-deep)}
/* What is CST: a longer headline than the others. A wider text column and a
   couple of points off the display size let it sit on the two lines Caroline
   wrote it in, rather than four. */
.hero--wide{grid-template-columns:minmax(0,1.58fr) minmax(0,.6fr)}
.hero--wide h1{max-width:none;font-size:clamp(28px,3.2vw,45px)}
@media(max-width:900px){.hero--wide{grid-template-columns:1fr}
  .hero--wide h1 br{display:none}}
.hero__sub{margin-top:clamp(22px,2.6vw,34px);font-size:var(--t-sub);
  color:var(--on-deep-soft);line-height:1.5;max-width:40ch}
@media(max-width:820px){.hero__sub{max-width:32ch}.hero__sub .brk{display:none}}
.hero__meta{margin-top:clamp(26px,3.2vw,42px);display:flex;gap:var(--s4);flex-wrap:wrap;align-items:center}

/* --------------------------------------------------------------------------
   8. CONTROLS
   -------------------------------------------------------------------------- */
.btn{display:inline-flex;align-items:center;gap:var(--s3);
  font-family:var(--f-label);font-size:var(--t-label);letter-spacing:.2em;text-transform:uppercase;
  padding:16px 30px;border-radius:999px;text-decoration:none;border:1px solid transparent;
  background:var(--sun);color:var(--abyss);cursor:pointer;
  box-shadow:0 2px 6px rgba(3,20,22,.34),0 14px 30px rgba(3,20,22,.3);
  transition:background var(--dur) var(--ease),transform var(--dur) var(--ease),
             box-shadow var(--dur) var(--ease)}
a.btn,a.btn:hover,a.btn:focus{color:var(--abyss)}
.btn:hover{background:var(--sun-soft);transform:translateY(-2px);
  box-shadow:0 3px 9px rgba(3,20,22,.38),0 22px 42px rgba(3,20,22,.36)}
.btn:active{transform:translateY(0)}
.btn--quiet{background:transparent;box-shadow:none;border-color:rgba(243,247,244,.34);
  color:var(--on-deep);font-size:15px;letter-spacing:.005em;text-transform:none;padding:15px 30px}
a.btn--quiet,a.btn--quiet:hover{color:var(--on-deep)}
.btn--quiet:hover{background:rgba(243,247,244,.09);border-color:var(--glass);box-shadow:none}
.on-chalk a.btn--quiet,.on-chalk a.btn--quiet:hover{color:var(--sea);border-color:rgba(17,88,92,.34)}
.on-chalk .btn--quiet:hover{background:rgba(17,88,92,.07);border-color:var(--sea)}
.btn svg{width:15px;height:10px;flex:none}
.btn svg path{stroke:currentColor;stroke-width:1.4;fill:none}

/* --------------------------------------------------------------------------
   9. THE DISC
   Every photograph on this site is a disc. Some carry rings.
   -------------------------------------------------------------------------- */
.disc{position:relative;display:flex;flex-direction:column;align-items:center}
.disc__frame{position:relative;line-height:0;z-index:2;
  width:min(430px,100%);aspect-ratio:1;border-radius:50%;overflow:hidden;
  box-shadow:0 4px 14px rgba(3,20,22,.4),0 34px 78px rgba(3,20,22,.46)}
.disc--sm .disc__frame{width:min(320px,100%)}
.disc--lg .disc__frame{width:min(500px,100%)}
.disc--mid .disc__frame{width:min(360px,100%)}
.disc--mid .rings{top:min(215px,50vw);width:min(900px,190%)}
.disc__frame img{width:100%;height:100%;object-fit:cover;object-position:56% 40%;
  filter:saturate(.88) contrast(1.03) brightness(1.02)}
.disc__frame::before{content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none;z-index:1;
  background:linear-gradient(200deg,var(--surf) 0%,var(--sea) 58%,var(--deep) 100%);
  mix-blend-mode:color;opacity:.16}
.disc__frame::after{content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none;z-index:2;
  background:linear-gradient(196deg,rgba(246,206,126,.14) 0%,rgba(0,0,0,0) 42%);mix-blend-mode:screen}
.disc--chalk .disc__frame::before{opacity:.1}
/* A shadow tuned for the deep field reads as a halo on the chalk one. */
.disc--chalk .disc__frame{box-shadow:0 2px 8px rgba(8,33,31,.09),0 18px 44px rgba(8,33,31,.12)}
.disc--portrait.disc--chalk .disc__frame{box-shadow:0 2px 8px rgba(8,33,31,.08),0 16px 40px rgba(8,33,31,.11)}
/* A portrait is a person, not a texture. Caroline keeps her own colouring;
   the field only has to meet her halfway. */
.disc--portrait .disc__frame img{object-position:47% 40%;
  filter:saturate(1) contrast(1.02) brightness(1.03)}
.disc--portrait .disc__frame::before{opacity:0}
.disc--portrait .disc__frame::after{opacity:.35}
/* An oval. Taller than it is wide, so a standing portrait keeps its head
   and its feet. The wash comes almost all the way off, because this one has
   a yellow in it worth keeping. */
.disc--oval .disc__frame{width:min(390px,100%);aspect-ratio:4/5;border-radius:50%}
.disc--oval.disc--lg .disc__frame{width:min(460px,100%)}
.disc--oval .disc__frame img{object-position:50% 34%;
  filter:saturate(1) contrast(1.02) brightness(1.02)}
.disc--oval .disc__frame::before{opacity:.05}
.disc--oval .disc__frame::after{opacity:.3}

/* A slot waiting for a photograph. Marked, never pretending. */
.disc__frame--waiting{display:flex;align-items:center;justify-content:center;
  background:rgba(159,217,201,.06);border:1px dashed var(--hair);box-shadow:none}
.disc__frame--waiting span{font-family:var(--f-label);font-size:14px;line-height:1.6;
  letter-spacing:.02em;color:var(--on-deep-faint);text-align:center}
.disc__frame--waiting::before,.disc__frame--waiting::after{display:none}

.disc__cap{margin-top:22px;text-align:center;font-family:var(--f-label);font-size:13.5px;
  letter-spacing:.01em;color:var(--on-deep-faint)}
.on-chalk .disc__cap{color:var(--ink-faint)}

/* The rings. Deliberately not concentric with the disc: the centre sits 2cm
   from it on the diagonal, up and to the left, which is 1.414cm on each axis.
   The rings break out further on one side and the gaps fall unevenly. */
.rings{position:absolute;z-index:1;pointer-events:none;
  left:50%;top:min(250px,50vw);
  transform:translate(calc(-50% - 1.414cm),calc(-50% - 1.414cm));
  width:min(1240px,190%);aspect-ratio:1}
.disc--sm .rings{top:min(190px,50vw);width:min(900px,190%)}
/* What it can do: Caroline wants this one's ring centre lower and well left
   of the disc, rather than up and to the left as everywhere else. */
.disc--lowrings .rings{transform:translate(calc(-50% - 2cm),calc(-50% + 2cm))}
.rings circle{fill:none;transform-origin:center;transform-box:fill-box;
  animation:ring var(--pulse) var(--ease) infinite}
.rings circle:nth-child(1){animation-delay:0s}
.rings circle:nth-child(2){animation-delay:.5s}
.rings circle:nth-child(3){animation-delay:1s}
.rings circle:nth-child(4){animation-delay:1.5s}
.rings circle:nth-child(5){animation-delay:2s}
.rings circle:nth-child(6){animation-delay:2.5s}
.rings circle:nth-child(7){animation-delay:3s}
@keyframes ring{
  0%,100%{transform:scale(.982);opacity:.16}
  50%    {transform:scale(1.018);opacity:.4}
}
@media(prefers-reduced-motion:reduce){.rings circle{animation:none;opacity:.28}}

/* --------------------------------------------------------------------------
   10. THE JOURNEY
   Header full width across the top, then the question on the left and the
   body on the right, with the line kept underneath.
   -------------------------------------------------------------------------- */
.journey__grid{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);
  gap:clamp(30px,5vw,80px);align-items:start}
.journey__aside{position:sticky;top:var(--s6)}
.journey__aside .ask{max-width:15ch}
/* The section's own heading, above the column it belongs to. Deliberately
   smaller than the recurring gold line; it is a subheading, not a banner. */
.journey__sub{font-family:var(--f-display);font-size:var(--t-opening);line-height:1.3;
  color:var(--sea);max-width:27ch;margin-bottom:clamp(24px,2.8vw,36px)}
.on-deep .journey__sub{color:var(--glass)}

/* A section that reads down the middle. */
.centred{text-align:center;max-width:62ch;margin-inline:auto}
.centred .prose{max-width:none}
.centred .over{margin-bottom:clamp(22px,2.6vw,34px)}
.centred figure{margin-block:clamp(30px,4vw,52px)}
.centred .disc{align-items:center}
.centred .aside{font-family:var(--f-display);font-size:var(--t-ask);line-height:1.34;
  color:var(--shallow);margin:0 0 1.15em}
.on-deep .centred .aside{color:var(--glass)}

/* --------------------------------------------------------------------------
   11. TWO-COLUMN PROSE, with a hairline down the middle
   -------------------------------------------------------------------------- */
.twocol{column-count:2;column-gap:clamp(34px,4.6vw,72px);column-rule:1px solid var(--hair-ink)}
.on-deep .twocol{column-rule-color:var(--hair)}
.twocol p{break-inside:avoid-column}
@media(max-width:820px){.twocol{column-count:1;column-rule:none}}

/* A large opening line that hands off into the body. */
.opening{font-family:var(--f-display);font-size:var(--t-opening);line-height:1.34;
  color:var(--sea);max-width:30ch;margin-bottom:clamp(26px,3vw,40px)}
.on-deep .opening{color:var(--glass)}

/* --------------------------------------------------------------------------
   12. SPREADS - a disc beside prose, alternating
   -------------------------------------------------------------------------- */
.spread{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:clamp(32px,5vw,80px);align-items:center}
.spread--flip{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}
.spread--flip>*:first-child{order:-1}
.spread+.spread{margin-top:clamp(64px,8vw,120px)}

/* --------------------------------------------------------------------------
   13. CASE STORY
   A deep panel with the water showing through, the story set large.
   -------------------------------------------------------------------------- */
.case{position:relative;overflow:hidden;isolation:isolate;color:var(--on-deep);
  border-radius:22px;padding:clamp(30px,4vw,60px)}
/* Inside the stories band the section already carries the colour, so a card
   only needs a hairline to say where it starts and stops. */
.stories__band .case{background:none;border:1px solid var(--hair);
  padding:clamp(26px,3.4vw,50px)}
.stories__band .case .caustic{display:none}
.case__text{position:relative;z-index:3;font-family:var(--f-body);font-style:italic;
  font-size:var(--t-quote);line-height:1.6;color:var(--on-deep);max-width:none;margin:0}
.case__by{position:relative;z-index:3;margin-top:var(--s6);padding-top:var(--s4);
  border-top:1px solid var(--hair);font-family:var(--f-label);font-size:13.5px;
  letter-spacing:.01em;color:var(--sun-soft)}

/* --------------------------------------------------------------------------
   13b. STORIES
   A row of case stories you swipe or step through. Every story is in the
   page and reachable by scrolling the track, so the arrows and dots are a
   convenience, never the only way in.
   -------------------------------------------------------------------------- */
.stories{position:relative}
.stories__track{display:flex;gap:clamp(18px,2.4vw,32px);overflow-x:auto;
  scroll-snap-type:x mandatory;scroll-behavior:smooth;
  scrollbar-width:none;-ms-overflow-style:none;padding-bottom:var(--s2)}
.stories__track::-webkit-scrollbar{display:none}
.stories__item{flex:0 0 100%;scroll-snap-align:center;min-width:0;display:flex}
.stories__item > .case{flex:1}
@media(prefers-reduced-motion:reduce){.stories__track{scroll-behavior:auto}}

.stories__bar{display:flex;align-items:center;justify-content:center;gap:var(--s5);
  margin-top:clamp(22px,2.6vw,34px)}
.stories__arrow{display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:50%;cursor:pointer;
  background:transparent;border:1px solid var(--hair-ink);color:var(--sea);
  transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease),
             color var(--dur) var(--ease)}
.on-deep .stories__arrow{border-color:var(--hair);color:var(--sun-soft)}
.stories__arrow:hover{background:rgba(17,88,92,.07);border-color:var(--sea)}
.on-deep .stories__arrow:hover{background:rgba(246,206,126,.12);border-color:var(--sun-soft)}
.stories__arrow:disabled{opacity:.3;cursor:default}
.stories__arrow svg{width:15px;height:11px}
.stories__arrow svg path{stroke:currentColor;stroke-width:1.5;fill:none;
  stroke-linecap:round;stroke-linejoin:round}

.stories__dots{display:flex;gap:10px;align-items:center}
.stories__dot{width:8px;height:8px;border-radius:50%;padding:0;cursor:pointer;
  background:transparent;border:1px solid var(--ink-faint);
  transition:background var(--dur) var(--ease),transform var(--dur) var(--ease)}
.on-deep .stories__dot{border-color:var(--on-deep-faint)}
.stories__dot[aria-current="true"]{background:var(--sea);border-color:var(--sea);transform:scale(1.25)}
.on-deep .stories__dot[aria-current="true"]{background:var(--sun-soft);border-color:var(--sun-soft)}

/* A story still waiting to be written. Marked, never pretending. */
.case--empty{border:1px dashed var(--hair-ink);background:var(--chalk-lift);
  box-shadow:none;color:var(--ink)}
.case--empty .case__text{color:var(--ink-faint);font-style:normal}
.case--empty .case__by{color:var(--ink-faint);border-top-color:var(--hair-ink)}
/* On the dark band the placeholder keeps the dashed outline but takes the
   band's own colouring, so it does not flash up as a white card. */
.stories__band .case--empty{background:none;border:1px dashed var(--hair)}
.stories__band .case--empty .case__text,
.stories__band .case--empty .case__by{color:var(--on-deep-faint)}
.stories__band .case--empty .case__by{border-top-color:var(--hair)}

/* --------------------------------------------------------------------------
   14. THE TIDE TABLE - the practical facts, as figures
   -------------------------------------------------------------------------- */
.table{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1px;
  background:var(--hair);border-block:1px solid var(--hair)}
.table__cell{background:var(--deep);padding:clamp(24px,3vw,38px);
  padding-bottom:clamp(12px,1.5vw,19px)}
.field--abyss .table__cell{background:var(--abyss)}
.table__k{font-family:var(--f-label);font-size:var(--t-micro);letter-spacing:.2em;
  text-transform:uppercase;color:var(--on-deep-faint);margin-bottom:var(--s3)}
.table__v{font-family:var(--f-display);font-size:var(--t-figure);line-height:1.26;color:var(--sun-soft)}
.table__v small{display:block;font-family:var(--f-body);font-size:var(--t-small);line-height:1.62;
  color:var(--on-deep-soft);margin-top:var(--s3);font-weight:300}

/* A plain definition list, for the longer practical detail. */
.facts{margin:0;border-top:1px solid var(--hair-ink)}
.on-deep .facts{border-top-color:var(--hair)}
.facts__row{display:grid;grid-template-columns:minmax(120px,.3fr) 1fr;gap:var(--s5);
  padding-block:var(--s5);border-bottom:1px solid var(--hair-ink);align-items:baseline}
.on-deep .facts__row{border-bottom-color:var(--hair)}
.facts__k{font-family:var(--f-label);font-size:var(--t-label);letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-faint);margin:0}
.on-deep .facts__k{color:var(--on-deep-faint)}
.facts__v{margin:0}
.facts__v strong{font-family:var(--f-display);font-weight:400;font-size:1.3em;color:var(--sea)}
.on-deep .facts__v strong{color:var(--sun-soft)}
@media(max-width:600px){.facts__row{grid-template-columns:1fr;gap:var(--s2)}}

/* --------------------------------------------------------------------------
   15. BANNER BAND - one line of hers, given a whole band
   -------------------------------------------------------------------------- */
.band{position:relative;overflow:hidden;padding-block:clamp(62px,8vw,112px);text-align:center}
/* The closing section: full width, sitting straight on top of the footer,
   with a photograph behind it and the same light moving over it as the hero. */
.closer{position:relative;overflow:hidden;isolation:isolate;
  padding-block:clamp(74px,9vw,136px);text-align:center;color:var(--on-deep)}
.closer::before{content:"";position:absolute;inset:0;z-index:0;
  background-image:var(--shot);
  background-image:image-set(var(--shot-webp) type("image/webp"), var(--shot) type("image/jpeg"));
  background-size:cover;background-position:var(--shot-pos,50% 40%);
  filter:saturate(.9) brightness(.95)}
.closer::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(168deg,rgba(17,88,92,.7) 0%,rgba(11,60,64,.78) 56%,rgba(6,40,43,.85) 100%)}
/* A photograph that is already nearly black needs far less wash, and wants
   framing higher up so the hands are not cut in half by the band. */
.closer--dark::before{background-position:50% 22%;filter:saturate(1) brightness(1.04)}
.closer--dark::after{background:linear-gradient(168deg,rgba(17,88,92,.3) 0%,rgba(11,60,64,.36) 56%,rgba(6,40,43,.48) 100%)}
.closer--dark .closer__veil{background:radial-gradient(58% 66% at 50% 42%, rgba(6,40,43,.66) 0%, rgba(6,40,43,.4) 48%, rgba(6,40,43,0) 80%)}
.closer .wrap{position:relative;z-index:3}
/* A soft scrim under the words, so legibility never depends on which part
   of the photograph happens to sit behind them. */
.closer__veil{position:absolute;inset:0;z-index:2;pointer-events:none;
  background:radial-gradient(62% 72% at 50% 50%, rgba(6,40,43,.62) 0%, rgba(6,40,43,.34) 46%, rgba(6,40,43,0) 78%)}
.closer .band__line{text-shadow:0 2px 16px rgba(6,40,43,.6)}
.closer .caustic{z-index:2}
.band__line{font-family:var(--f-display);font-size:var(--t-band);line-height:1.3;
  max-width:22ch;margin:0 auto}
.band__line em{font-style:italic;font-family:var(--f-body);font-weight:300;color:var(--sun-soft)}
.band--chalk .band__line{color:var(--sea)}
.band--chalk .band__line em{color:var(--shallow)}
.band__acts{margin-top:var(--s7);display:flex;flex-wrap:wrap;
  gap:var(--s4);justify-content:center}
/* Standing next to the gold button, the quiet one has to be its twin in
   everything but fill, or the pair looks like an accident. */
.band__acts .btn--quiet{font-size:var(--t-label);letter-spacing:.2em;
  text-transform:uppercase;padding:16px 30px}
.band__note{margin-top:var(--s5);font-family:var(--f-body);font-weight:300;
  font-size:clamp(18px,1.6vw,23px);line-height:1.5;letter-spacing:.005em;
  color:var(--on-deep);max-width:42ch;margin-inline:auto;
  text-shadow:0 1px 10px rgba(6,40,43,.55)}
.band--chalk .band__note{color:var(--ink-faint)}

/* --------------------------------------------------------------------------
   16. TENETS - her six ideas, given room
   Not a list with rules through it. Six statements, each under its own small
   ring, set at reading size with air around them.
   -------------------------------------------------------------------------- */
/* The six principles, set as an editorial spread: the lead-in sentence holds
   the left column, the principles run as a numbered table on the right. Each
   one sits under its own hairline, so the ragged bottom edge of the grid stops
   looking like an accident. */
.tenets__spread{display:grid;
  grid-template-columns:minmax(0,.52fr) minmax(0,1.48fr);
  gap:clamp(34px,4.4vw,72px);align-items:start;
  margin-top:clamp(18px,2vw,30px)}
.tenets__spread .over{margin-bottom:0;max-width:13ch}
@media(max-width:900px){.tenets__spread{grid-template-columns:1fr}
  .tenets__spread .over{max-width:24ch}}

.tenets{list-style:none;margin:0;padding:0;counter-reset:tenet;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(228px,1fr));
  gap:clamp(30px,3.4vw,52px) clamp(28px,3.2vw,54px)}
.tenets li{counter-increment:tenet;
  border-top:1px solid var(--hair);padding-top:clamp(14px,1.5vw,20px)}
.on-chalk .tenets li{border-top-color:var(--hair-ink)}
.tenets li::before{content:counter(tenet,decimal-leading-zero);display:block;
  font-family:var(--f-display);font-size:clamp(19px,1.8vw,25px);line-height:1;
  letter-spacing:.05em;color:var(--sun-soft);
  margin-bottom:clamp(13px,1.3vw,19px)}
.on-chalk .tenets li::before{color:var(--shallow)}
.tenets p{font-family:var(--f-body);font-size:clamp(16.5px,1.4vw,18.5px);
  line-height:1.6;color:var(--on-deep);margin:0}
.on-chalk .tenets p{color:var(--ink)}
/* Caroline's emphasis reads exactly as the rest of the line. */
.tenets em{font-style:normal;font-weight:inherit;color:inherit}

/* Kate Mackinnon's film, beside the paragraph that introduces it. */
.film{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:clamp(30px,3.6vw,60px);align-items:center}
.film .prose{max-width:none}
.film__frame{position:relative;aspect-ratio:16/9;border-radius:14px;overflow:hidden;
  background:var(--abyss);box-shadow:0 2px 10px rgba(8,33,31,.1),0 20px 48px rgba(8,33,31,.14)}
.film__frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
@media(max-width:820px){.film{grid-template-columns:1fr}}
/* One film on its own, centred, with the words above it. */
.film--solo{grid-template-columns:1fr;gap:0;max-width:720px;margin-inline:auto;text-align:center}
.film--solo .over{margin-bottom:var(--s1);font-size:clamp(22px,2.1vw,29px)}
/* One line, whatever the width. The tight line-height matters as much as the
   size: on a single line, leading is what shows up as space above and below. */
.film__note{font-family:var(--f-body);font-size:clamp(16px,1.3vw,17.5px);font-weight:300;
  line-height:1.35;color:var(--on-deep-soft);
  margin:0 auto clamp(20px,2.1vw,28px);max-width:none}
.on-chalk .film__note{color:var(--ink-faint)}
@media(max-width:560px){.film__note{font-size:15px}}

/* Copy on the left, a photograph on the right that holds its place while the
   words scroll past it. Sticky needs a grid whose items are not stretched, or
   the figure fills the row and never sticks. */
.held{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);
  gap:clamp(30px,5vw,80px);align-items:start}
.held > div{grid-column:2;grid-row:1}
.held__stick{grid-column:1;grid-row:1;justify-self:center;
  width:min(330px,100%);
  margin:0;position:sticky;top:clamp(88px,11vh,124px)}
.held__stick img{display:block;width:100%;height:auto;border-radius:18px;
  box-shadow:0 3px 12px rgba(8,33,31,.12),0 24px 56px rgba(8,33,31,.16)}
@media(max-width:980px){.held{grid-template-columns:1fr}
  .held > div,.held__stick{grid-column:1;grid-row:auto}
  .held__stick{position:static;width:min(440px,100%);margin-inline:auto}}
@media(prefers-reduced-motion:reduce){.held__stick{position:static}}

/* --------------------------------------------------------------------------
   17. FOOTER
   -------------------------------------------------------------------------- */
.foot{background:var(--sea);color:var(--on-deep-soft);padding-block:var(--s7) var(--s5)}
.foot--sea{background:var(--sea)}
.foot__grid{display:grid;grid-template-columns:minmax(0,1.3fr) repeat(2,minmax(0,1fr));
  gap:clamp(28px,4vw,64px);padding-bottom:var(--s6);border-bottom:1px solid var(--hair)}
.foot h2{font-family:var(--f-label);font-size:var(--t-micro);letter-spacing:.2em;
  text-transform:uppercase;color:var(--on-deep-faint);margin-bottom:var(--s4)}
.foot__note p{font-size:var(--t-small);line-height:1.58;margin-bottom:.7em}
.foot__note p:last-child{margin-bottom:0}
.foot__note a{font-size:var(--t-small)}
.foot ul{list-style:none;margin:0;padding:0}
.foot li+li{margin-top:var(--s2)}
.foot li a{font-size:var(--t-small);text-decoration:none;border-bottom:1px solid transparent}
.foot li a:hover{border-bottom-color:rgba(246,206,126,.5)}
.foot__end{padding-top:var(--s5);display:flex;flex-wrap:wrap;gap:var(--s3) var(--s7);
  justify-content:space-between;font-family:var(--f-label);font-size:13.5px;
  letter-spacing:.01em;color:var(--on-deep-faint)}

/* --------------------------------------------------------------------------
   18. RESPONSIVE
   -------------------------------------------------------------------------- */
@media(max-width:980px){
  .hero,.journey__grid,.spread,.spread--flip{grid-template-columns:minmax(0,1fr)}
  .hero{gap:var(--s8)}
  .hero h1{max-width:none}
  .journey__aside{position:static}
  .journey__aside .ask{max-width:none}
  .spread--flip>*:first-child{order:0}
  .disc{order:-1}
  .foot__grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}
@media(max-width:720px){
  :root{--t-body:18px}
  .menu-btn{display:inline-flex;align-items:center;gap:var(--s3);background:none;
    border:1px solid var(--hair);border-radius:999px;color:var(--on-deep);
    font-family:var(--f-label);font-size:var(--t-micro);letter-spacing:.2em;
    text-transform:uppercase;padding:9px var(--s4);cursor:pointer}
  .menu-btn svg{width:14px;height:10px}
  .menu-btn svg line{stroke:currentColor;stroke-width:1.4}
  .nav{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;
    align-items:stretch;gap:0;background:var(--abyss);padding:var(--s3) var(--gutter) var(--s6);
    border-block:1px solid var(--hair);z-index:50}
  .nav.is-open{display:flex}
  .nav a{padding-block:var(--s4);border-bottom:1px solid var(--hair)}
  .nav a:hover{border-bottom-color:var(--hair)}
  .mast__inner{position:relative}
  .hero__meta .btn{width:100%;justify-content:center}
  .foot__grid{grid-template-columns:minmax(0,1fr)}
}
/* The rings crowd a small disc; they come in rather than going away. */
@media(max-width:620px){
  .rings{width:min(760px,150%);top:min(170px,42vw)}
}
@media print{
  .caustic,.surface-light,.rings,.mast{display:none}
  body{background:var(--chalk-lift);color:var(--ink-print)}
}