/* ============================================================
   ianpetroni.net
   Ian Petroni — Cleveland
   Site by Sean Muggivan / Muggs of Dreams

   The palette is sampled from Ian's own photographs rather
   than chosen — see the colour block below. The two grounds
   are the two light conditions he works in: the build tent
   at noon in June, and lantern parades after dark.
   ============================================================ */

/* ---- 1. Tokens ------------------------------------------- */

:root{
  /* ---- colour ------------------------------------------------
     Sampled, not chosen. Every pixel of Ian's own photographs was
     clustered by hue; these five families are what came back, in
     order of how much of his work they cover — lantern amber (35%
     of all saturated pixels), ember red, twilight blue, gold, moss.
     The ground and the ink are his neutrals, measured the same way.

     The hue is his. The lightness is whatever WCAG demanded:

       --flag-*  full strength. Bunting, markers, rules. NEVER text.
       --ink-*   same hue, taken down until it clears 4.5:1 as small
                 text on pulp.
       --lit-*   same hue, taken up until it clears 4.5:1 on night.

     Nothing outside this block may set a colour on text.          */

  --pulp:        #DEDAD0;   /* his paper, measured */
  --pulp-shade:  #CBC6B9;   /* panels, input fills */
  --pulp-line:   #B8B2A2;   /* hairlines on pulp */
  --armature:    #3A403B;   /* body text — 7.6:1 on pulp */
  --night:       #191D23;   /* after dark: bands and the footer */
  --night-line:  #333A43;

  --flag-amber:    #E8901F;
  --flag-ember:    #D8412B;
  --flag-twilight: #4A7FBF;
  --flag-gold:     #E3B23C;
  --flag-moss:     #7A8A3A;

  --ink-amber:     #8A4A06;   /* 4.91:1 on pulp */
  --ink-ember:     #A32418;   /* 5.33:1 */
  --ink-twilight:  #22527F;   /* 5.83:1 */
  --ink-gold:      #6E5210;   /* 5.23:1 */
  --ink-moss:      #42501A;   /* 6.28:1 */

  --lit-amber:     #F3B15C;   /* 9.07:1 on night */
  --lit-ember:     #FF8C79;   /* 7.48:1 */
  --lit-twilight:  #8FB9E6;   /* 8.26:1 */
  --lit-gold:      #EFC75F;   /* 10.48:1 */
  --lit-moss:      #B6C46B;   /* 8.94:1 */

  --trinidad:  var(--flag-ember);
  --dandelion: var(--lit-gold);

  /* per-context colours. Re-set inside .band--night and .footer. */
  --ink:       var(--armature);
  --ink-quiet: #585F58;      /* 4.71:1 on pulp */
  --ground:    var(--pulp);
  --rule:      var(--pulp-line);
  --accent:    var(--ink-ember);

  /* type */
  /* The type case out of a shut-down Cleveland print shop.

     The Cleveland Type Foundry cast metal type here from 1875 until
     1892, when it was folded — with twenty-two other American
     foundries — into American Type Founders. Its faces did not
     disappear; they went into other people's cases and kept
     printing. That is the same move Ian makes with materials.

     League Gothic      open revival of Alternate Gothic No. 1,
                        Morris Fuller Benton, ATF, 1903. The
                        condensed industrial capital of American
                        bridges, freight and factory signage.
     Libre Caslon Text  Caslon — the American jobbing printer's
                        default for two centuries.
     Courier Prime      the typed work order. A plan block is a shop
                        document and should look like one.          */
  --face-display: "League Gothic", "Arial Narrow", "Helvetica Neue", sans-serif;
  --face-body:    "Libre Caslon Text", Georgia, "Times New Roman", serif;
  --face-mono:    "Courier Prime", "Courier New", ui-monospace, monospace;

  /* Condensed gothic reads smaller at a given size and Caslon reads
     larger, so both ends of the scale move to compensate. */
  --fs-body:   clamp(1rem, 0.96rem + 0.2vw, 1.0938rem);
  --fs-small:  clamp(0.9063rem, 0.88rem + 0.13vw, 0.9688rem);
  --fs-lede:   clamp(1.125rem, 1.02rem + 0.52vw, 1.3125rem);
  --fs-h3:     clamp(1.375rem, 1.26rem + 0.56vw, 1.75rem);
  --fs-h2:     clamp(2rem, 1.53rem + 2.35vw, 3.375rem);
  --fs-h1:     clamp(2.75rem, 1.85rem + 4.5vw, 5.25rem);
  --fs-hero:   clamp(3.25rem, 1.1rem + 10.6vw, 9.5rem);
  --fs-mono:   0.875rem;
  --fs-mono-s: 0.8125rem;

  --lh-body:  1.68;
  --lh-tight: 0.96;
  --measure:  65ch;
  --measure-narrow: 54ch;

  /* rhythm — one unit, reused everywhere */
  --u:      1.5rem;
  --u-half: 0.75rem;
  --u2:     3rem;
  --u3:     4.5rem;
  --section-pad: clamp(3.5rem, 1.5rem + 7vw, 7rem);
  --gutter: clamp(1.25rem, 0.6rem + 2.6vw, 3rem);
  --shell:  74rem;
}

/* ---- 2. Reset -------------------------------------------- */

*,*::before,*::after{ box-sizing:border-box; }

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  background-color:var(--pulp);
  /* Paper tooth. CSS only — an SVG turbulence field plus a fine
     rule at an odd angle. Never a photograph, never a texture
     file. If you can consciously see it, halve the opacity
     inside the SVG. */
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='t'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23t)' opacity='0.035'/%3E%3C/svg%3E"),
    repeating-linear-gradient(101deg,
      rgba(62,69,64,.025) 0 1px, rgba(62,69,64,0) 1px 5px);
  background-attachment:fixed;
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
}

body{
  margin:0;
  background:transparent;
  color:var(--ink);
  font-family:var(--face-body);
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  font-optical-sizing:auto;
  text-rendering:optimizeLegibility;
}

img{ max-width:100%; height:auto; display:block; }
svg{ display:block; }

/* ---- 3. Type --------------------------------------------- */

h1,h2,h3,h4{
  font-family:var(--face-display);
  font-weight:400;                  /* League Gothic ships one weight */
  line-height:var(--lh-tight);
  letter-spacing:0.004em;           /* condensed wants air, not less */
  margin:0;
  font-variation-settings:"wdth" 100;
  text-wrap:balance;
}

h1{ font-size:var(--fs-h1); }
h2{ font-size:var(--fs-h2); }
h3{ font-size:var(--fs-h3); line-height:1.06; letter-spacing:0.012em; }

p{ margin:0 0 var(--u); }
p:last-child{ margin-bottom:0; }

.prose{ max-width:var(--measure); }
.prose--narrow{ max-width:var(--measure-narrow); }

.lede{
  font-size:var(--fs-lede);
  line-height:1.5;
  max-width:52ch;
}

.mono{
  font-family:var(--face-mono);
  font-size:var(--fs-mono);
  letter-spacing:0.09em;
  text-transform:uppercase;
}

.eyebrow{
  font-family:var(--face-mono);
  font-size:var(--fs-mono-s);
  letter-spacing:0.11em;
  text-transform:uppercase;
  color:var(--ink-quiet);
  margin:0 0 var(--u-half);
  display:block;
}
.eyebrow--accent{ color:var(--accent); }

/* Links in prose: the underline is the affordance. */
a{ color:inherit; }

.prose a,
.linklist a,
.press-list a,
.history a,
.footer a{
  color:inherit;
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:0.18em;
  text-decoration-color:var(--rule);
  transition:text-decoration-color .15s ease;
}
.prose a:hover,
.linklist a:hover,
.press-list a:hover,
.history a:hover,
.footer a:hover{ text-decoration-color:currentColor; }

:where(a,button,input,textarea,select,summary,[tabindex]):focus-visible{
  outline:2px solid var(--ink);
  outline-offset:3px;
  border-radius:1px;
}

.skip{
  position:absolute; left:-9999px; top:0;
  background:var(--armature); color:var(--pulp);
  padding:var(--u-half) var(--u);
  font-family:var(--face-mono); font-size:var(--fs-mono);
  z-index:60;
}
.skip:focus{ left:var(--gutter); top:var(--u-half); }

.sr-only{
  position:absolute; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ---- 4. Shell -------------------------------------------- */

.page{ display:flex; flex-direction:column; min-height:100vh; }

.wrap{
  width:min(100% - (var(--gutter) * 2), var(--shell));
  margin-inline:auto;
}

.section{ padding-block:var(--section-pad); }
.section--tight{ padding-block:calc(var(--section-pad) * 0.62); }

/* Full-bleed dark band. Its own ground, hairlines and accent —
   nothing set here leaks back out to the page. */
.band--night{
  background-color:var(--night);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='t'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23t)' opacity='0.05' fill='%23ffffff'/%3E%3C/svg%3E");
  --ink:       #E4E0D6;      /* 12.8:1 on night */
  --ink-quiet: #9AA0A2;      /* 6.4:1 */
  --ground:    var(--night);
  --rule:      var(--night-line);
  --accent:    var(--lit-gold);
  color:var(--ink);
  position:relative;
}
/* lantern light — a slow warm bloom, never a flat fill */
.band--night::before{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(52% 64% at 16% 0%,   rgba(243,177,92,.15),  transparent 70%),
    radial-gradient(46% 56% at 82% 6%,   rgba(216,65,43,.10),   transparent 72%),
    radial-gradient(54% 60% at 54% 104%, rgba(74,127,191,.12),  transparent 70%);
  pointer-events:none;
}
.band--night > *{ position:relative; }

.rule{
  border:0;
  border-top:1px solid var(--rule);
  margin:var(--u2) 0;
}

/* ---- 5. Header + nav ------------------------------------- */

.header{
  border-bottom:1px solid var(--pulp-line);
  background:rgba(222,218,208,.9);
  backdrop-filter:saturate(120%) blur(6px);
  position:sticky; top:0; z-index:40;
}

.header__inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--u);
  min-height:4.25rem;
}

.wordmark{
  font-family:var(--face-display);
  font-weight:400;
  font-variation-settings:"wdth" 100;
  font-size:1.375rem;
  letter-spacing:0.15em;
  text-transform:uppercase;
  text-decoration:none;
  color:var(--armature);
  white-space:nowrap;
}

.nav{ display:flex; align-items:center; gap:clamp(0.9rem,1.8vw,1.85rem); }

.nav a{
  font-family:var(--face-mono);
  font-size:var(--fs-mono-s);
  letter-spacing:0.07em;
  text-transform:uppercase;
  text-decoration:none;
  color:var(--armature);
  padding-block:0.35rem;
  border-bottom:2px solid transparent;
  white-space:nowrap;
}
.nav a:hover{ border-bottom-color:var(--pulp-line); }
.nav a[aria-current="page"]{ border-bottom-color:var(--trinidad); }
.nav a.nav__cta{
  border:1px solid var(--armature);
  border-radius:2px;
  padding:0.45rem 0.85rem;
}
.nav a.nav__cta:hover{ background:var(--armature); color:var(--pulp); }

.nav__toggle{
  display:none;
  font-family:var(--face-mono);
  font-size:var(--fs-mono-s);
  letter-spacing:0.11em;
  text-transform:uppercase;
  background:none; border:1px solid var(--armature); border-radius:2px;
  color:var(--armature);
  padding:0.5rem 0.8rem;
  cursor:pointer;
}
.nav__close{ display:none; }

/* The menu on a phone is a list of rows, not a centred stack.

   The old version centred the items and let the panel scroll, which is
   the classic way to make the top of an overflowing list unreachable —
   and it hid how many pages there were, so people missed half the site.
   Rows with rules read as a complete list at a glance, all seven fit on
   a small phone without scrolling, and the close button stays put if it
   ever does scroll. */
@media (max-width: 62rem){
  .nav__toggle{ display:block; }

  .nav{
    position:fixed;
    inset:0;
    height:100dvh;                 /* not 100vh: iOS toolbars eat the bottom */
    background:var(--pulp);
    flex-direction:column;
    align-items:stretch;
    justify-content:flex-start;    /* never centre a panel that might overflow */
    gap:0;
    padding:0 0 env(safe-area-inset-bottom);
    z-index:50;
    display:none;
    overflow-y:auto;
    overscroll-behavior:contain;
  }
  .nav[data-open="true"]{ display:flex; }

  .nav__close{
    display:block;
    position:sticky;               /* stays reachable however far it scrolls */
    top:0;
    z-index:1;
    width:100%;
    text-align:right;
    background:var(--pulp);
    border:0;
    border-bottom:1px solid var(--pulp-line);
    font-family:var(--face-mono);
    font-size:var(--fs-mono-s);
    letter-spacing:0.11em;
    text-transform:uppercase;
    color:var(--ink-quiet);
    padding:1rem var(--gutter);
    cursor:pointer;
  }

  .nav a{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:var(--u);
    font-size:1.0625rem;
    letter-spacing:0.1em;
    padding:0.8rem var(--gutter);
    border:0;
    border-bottom:1px solid var(--pulp-line);
    min-height:2.9rem;
  }
  .nav a::after{
    content:"→";
    color:var(--ink-quiet);
    font-size:1rem;
  }
  .nav a:hover{ background:var(--pulp-shade); }

  /* current page: a colour bar down the left, since there is no
     underline to borrow on a stacked list */
  .nav a[aria-current="page"]{
    box-shadow:inset 3px 0 0 var(--flag-ember);
    color:var(--ink-ember);
  }

  /* the one thing that is not a page */
  .nav a.nav__cta{
    margin:var(--u-half) var(--gutter);
    padding:0.85rem 1.1rem;
    border:1px solid var(--armature);
    border-radius:2px;
    background:var(--armature);
    color:var(--pulp);
    justify-content:center;
  }
  .nav a.nav__cta::after{ content:none; }
  .nav a.nav__cta:hover{ background:var(--armature); color:var(--pulp); }

  /* signals the end of the list, and stops the panel dying in white */
  .nav::after{
    content:"";
    display:block;
    flex:0 0 22px;
    margin-top:auto;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='22' viewBox='0 0 200 22'%3E%3Cpolygon points='0,0 40,0 20,22' fill='%23D8412B'/%3E%3Cpolygon points='40,0 80,0 60,22' fill='%23E8901F'/%3E%3Cpolygon points='80,0 120,0 100,22' fill='%23E3B23C'/%3E%3Cpolygon points='120,0 160,0 140,22' fill='%237A8A3A'/%3E%3Cpolygon points='160,0 200,0 180,22' fill='%234A7FBF'/%3E%3C/svg%3E");
    background-repeat:repeat-x;
    background-size:200px 22px;
  }
}

/* ---- 6. Hero --------------------------------------------- */

.hero{ padding-block:clamp(2.75rem, 1rem + 8.5vw, 7.5rem) calc(var(--section-pad) * 0.7); }

.hero__name{
  font-size:var(--fs-hero);
  font-weight:400;
  font-variation-settings:"wdth" 88;
  letter-spacing:0.012em;
  line-height:0.88;
  margin:0 0 var(--u);
  text-transform:uppercase;
}

.hero__thesis{
  font-family:var(--face-mono);
  font-size:clamp(0.8125rem, 0.74rem + 0.36vw, 0.9375rem);
  letter-spacing:0.09em;
  text-transform:uppercase;
  line-height:1.85;
  margin:0 0 var(--u2);
  /* each clause sets on one line; it only wraps when the screen forces it */
  max-width:none;
}
.hero__thesis span{ display:block; }
.hero__thesis span + span{ color:var(--trinidad); }

/* A plain label under the name — deliberately not a tagline. */
.hero__line{
  font-family:var(--face-mono);
  font-size:clamp(0.8125rem, 0.74rem + 0.36vw, 0.9375rem);
  letter-spacing:0.09em;
  text-transform:uppercase;
  color:var(--ink-quiet);
  margin:0 0 var(--u);
}

/* Reserved for a real quotation, once one is chosen. */
.hero__quote{
  margin:0 0 var(--u2);
  max-width:30ch;
  border-left:2px solid var(--lit-amber);
  padding-left:clamp(1rem, 2vw, 1.5rem);
}
.hero__quote p{
  font-family:var(--face-display);
  font-size:clamp(1.375rem, 1.05rem + 1.5vw, 2.125rem);
  font-weight:400;
  line-height:1.06;
  letter-spacing:0.008em;
  margin:0 0 var(--u-half);
  text-wrap:balance;
}
.hero__quote cite{
  font-family:var(--face-mono);
  font-size:var(--fs-mono-s);
  letter-spacing:0.09em;
  text-transform:uppercase;
  font-style:normal;
  color:var(--ink-quiet);
  display:block;
}

/* page headers on interior pages */
.pagehead{ padding-block:clamp(2.5rem, 1rem + 6vw, 5.5rem) var(--u2); }
.pagehead h1{ margin-bottom:var(--u); }

/* ---- 7. Doors -------------------------------------------- */

.doors{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(17rem, 1fr));
  gap:1px;
  background:var(--rule);
  border:1px solid var(--rule);
}

.door{
  background:var(--ground);
  padding:clamp(1.5rem, 1rem + 2vw, 2.5rem);
  text-decoration:none;
  color:inherit;
  display:flex; flex-direction:column; gap:var(--u-half);
  transition:background .18s ease;
}
.door:hover{ background:var(--pulp-shade); }
.band--night .door:hover{ background:#232830; }

.door__label{
  font-family:var(--face-mono);
  font-size:var(--fs-mono-s);
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--ink-quiet);
}
.door__title{
  font-family:var(--face-display);
  font-size:var(--fs-h2);
  font-weight:400;
  font-variation-settings:"wdth" 100;
  line-height:1.0;
  letter-spacing:0.008em;
}
.door__body{ font-size:var(--fs-small); max-width:34ch; margin:0; }
.door__go{
  font-family:var(--face-mono);
  font-size:var(--fs-mono-s);
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--accent);
  margin-top:auto;
  padding-top:var(--u);
}

/* ---- 8. The plan block — the signature ------------------- */
/* Found, not invented: the CMA Women's Council describes a
   design-and-assembly plan worked out before production began.
   STATUS is the field that carries the site. Most of this work
   no longer exists. */

.plan{
  font-family:var(--face-mono);
  font-size:var(--fs-mono);
  line-height:1.55;
  margin:0;
  border-top:2px solid var(--ink);
  border-bottom:1px solid var(--rule);
}

.plan__row{
  display:grid;
  grid-template-columns:8.5rem 1fr;
  gap:0 1.25rem;
  padding:0.55rem 0;
  border-top:1px solid var(--rule);
}
.plan__row:first-of-type{ border-top:0; }

.plan dt{
  letter-spacing:0.09em;
  text-transform:uppercase;
  color:var(--ink-quiet);
  font-size:var(--fs-mono-s);
  padding-top:0.08em;
}
.plan dd{ margin:0; letter-spacing:0.01em; }

.plan__row--status dd{
  color:var(--accent);
  font-weight:700;
}

.plan__head{
  display:flex; flex-wrap:wrap; align-items:baseline;
  gap:0.6rem var(--u);
  margin:0 0 var(--u-half);
}
.plan__head h3{ margin:0; }
.plan__head .mono{
  color:var(--ink-quiet);
  font-size:var(--fs-mono-s);
  letter-spacing:0.14em;
}

.entry{ margin:0 0 var(--u3); max-width:46rem; }
.entry > p{ font-size:var(--fs-small); max-width:var(--measure); }
.entry .plan{ margin-top:var(--u); }
.entry:last-child{ margin-bottom:0; }

.plans-strip{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(16rem, 1fr));
  gap:var(--u2);
}
.plans-strip .entry{ margin:0; max-width:none; }
.plans-strip .plan__row{ grid-template-columns:6.5rem 1fr; }

@media (max-width: 30rem){
  .plan__row,
  .plans-strip .plan__row{
    grid-template-columns:1fr;
    gap:0.1rem;
    padding:0.6rem 0;
  }
}

/* ---- 9. Pull quotes -------------------------------------- */

.pull{
  margin:var(--u2) 0;
  max-width:27ch;
  border-left:2px solid var(--accent);
  padding-left:clamp(1rem, 2vw, 1.75rem);
}
.pull p{
  font-family:var(--face-display);
  font-size:clamp(1.75rem, 1.3rem + 2.2vw, 2.875rem);
  font-weight:400;
  font-variation-settings:"wdth" 100;
  line-height:1.06;
  letter-spacing:0.008em;
  margin:0 0 var(--u-half);
  text-wrap:balance;
}
.pull cite{
  font-family:var(--face-mono);
  font-size:var(--fs-mono-s);
  letter-spacing:0.11em;
  text-transform:uppercase;
  font-style:normal;
  color:var(--ink-quiet);
  display:block;
  line-height:1.7;
}
.pull--wide{ max-width:36ch; }

/* In a narrow sidebar the display size has to come down or the quote
   sets ten characters to the line. */
.cols--sidebar .pull p{
  font-size:clamp(1.25rem, 1.05rem + 0.85vw, 1.625rem);
  line-height:1.2;
}
.cols--sidebar .pull{ max-width:30ch; }

/* ---- 10. Numbered sequence ------------------------------- */

.steps{ list-style:none; margin:0; padding:0; }
.step{
  display:grid;
  grid-template-columns:5.5rem 1fr;
  gap:0 var(--u);
  padding:var(--u2) 0;
  border-top:1px solid var(--rule);
}
.step:last-child{ border-bottom:1px solid var(--rule); }
.step__n{
  font-family:var(--face-mono);
  font-size:var(--fs-mono);
  letter-spacing:0.12em;
  color:var(--accent);
  padding-top:0.4em;
}
.step h3{ margin:0 0 var(--u-half); }
.step p{ font-size:var(--fs-small); max-width:var(--measure); }
@media (max-width: 34rem){
  .step{ grid-template-columns:1fr; gap:var(--u-half); }
  .step__n{ padding-top:0; }
}

/* ---- 11. Lists ------------------------------------------- */

.linklist{ list-style:none; margin:0; padding:0; }
.linklist li{ padding:var(--u) 0; border-top:1px solid var(--rule); }
.linklist li:last-child{ border-bottom:1px solid var(--rule); }

.press-list{ list-style:none; margin:0; padding:0; }
.press-item{
  display:grid;
  grid-template-columns:minmax(9rem, 13rem) 1fr;
  gap:0.35rem var(--u2);
  padding:var(--u2) 0;
  border-top:1px solid var(--rule);
}
.press-item:last-child{ border-bottom:1px solid var(--rule); }
.press-item__meta{
  font-family:var(--face-mono);
  font-size:var(--fs-mono-s);
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--ink-quiet);
  line-height:1.75;
}
.press-item__meta strong{ color:var(--ink); font-weight:700; display:block; }
.press-item h3{ margin:0 0 var(--u-half); }
.press-item p{ font-size:var(--fs-small); margin:0; max-width:56ch; }
.press-item .out{
  font-family:var(--face-mono);
  font-size:var(--fs-mono-s);
  letter-spacing:0.12em;
  text-transform:uppercase;
  display:inline-block;
  margin-top:var(--u-half);
}
@media (max-width: 44rem){
  .press-item{ grid-template-columns:1fr; }
}

/* The range inventory. Plain statement of what he can do — the one
   place on the site that credits him more than he would credit
   himself, and it does it by listing rather than by adjectives. */
.range{ list-style:none; margin:0; padding:0; }
.range li{
  display:grid;
  grid-template-columns:14rem 1fr;
  gap:0 var(--u2);
  padding:var(--u) 0;
  border-top:1px solid var(--rule);
  font-size:var(--fs-small);
}
.range li:last-child{ border-bottom:1px solid var(--rule); }
.range .what{
  font-family:var(--face-mono);
  font-size:var(--fs-mono-s);
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--ink);
  padding-top:0.35em;
  line-height:1.7;
}
.range li > span:last-child{ max-width:58ch; }
@media (max-width: 44rem){
  .range li{ grid-template-columns:1fr; gap:0.3rem; }
  .range .what{ padding-top:0; }
}

.history{ list-style:none; margin:0; padding:0; }
.history li{
  display:grid;
  grid-template-columns:6.5rem 1fr;
  gap:0 var(--u);
  padding:var(--u) 0;
  border-top:1px solid var(--rule);
  font-size:var(--fs-small);
}
.history li:last-child{ border-bottom:1px solid var(--rule); }
.history .yr{
  font-family:var(--face-mono);
  font-size:var(--fs-mono-s);
  letter-spacing:0.1em;
  color:var(--ink-quiet);
  padding-top:0.3em;
}
@media (max-width: 34rem){
  .history li{ grid-template-columns:1fr; gap:0.15rem; }
}

/* ---- 12. Buttons ----------------------------------------- */

.btn{
  display:inline-block;
  font-family:var(--face-mono);
  font-size:var(--fs-mono-s);
  letter-spacing:0.1em;
  text-transform:uppercase;
  text-decoration:none;
  color:var(--pulp);
  background:var(--armature);
  border:1px solid var(--armature);
  border-radius:2px;
  padding:0.85rem 1.35rem;
  cursor:pointer;
  transition:background .16s ease, color .16s ease;
}
.btn:hover{ background:transparent; color:var(--armature); }

.band--night .btn,
.footer .btn{
  background:var(--dandelion);
  border-color:var(--dandelion);
  color:var(--night);
}
.band--night .btn:hover,
.footer .btn:hover{ background:transparent; color:var(--dandelion); }

.btn--ghost{ background:transparent; color:var(--armature); }
.btn--ghost:hover{ background:var(--armature); color:var(--pulp); }

/* .prose a (and the list rules) set colour and an underline on every
   link they contain. A button sitting inside prose has to beat that on
   specificity rather than on source order luck — without this the label
   inherits the body colour and vanishes into its own background. */
.prose a.btn,
.linklist a.btn,
.press-list a.btn,
.footer a.btn{
  color:var(--pulp);
  text-decoration:none;
}
.prose a.btn:hover,
.linklist a.btn:hover,
.press-list a.btn:hover,
.footer a.btn:hover{ color:var(--armature); }

.band--night .prose a.btn,
.footer .prose a.btn{ color:var(--night); }
.band--night .prose a.btn:hover,
.footer .prose a.btn:hover{ color:var(--dandelion); }

.prose a.btn--ghost{ color:var(--armature); }
.prose a.btn--ghost:hover{ color:var(--pulp); }

/* ---- 13. Forms ------------------------------------------- */

.form{ max-width:38rem; }
.field{ margin:0 0 var(--u); }
.field label{
  display:block;
  font-family:var(--face-mono);
  font-size:var(--fs-mono-s);
  letter-spacing:0.13em;
  text-transform:uppercase;
  color:var(--ink-quiet);
  margin:0 0 0.45rem;
}
.field .hint{
  display:block;
  text-transform:none;
  letter-spacing:0;
  font-family:var(--face-body);
  font-size:var(--fs-small);
  color:var(--ink-quiet);
  margin-top:0.3rem;
}
.field input,
.field select,
.field textarea{
  width:100%;
  font-family:var(--face-body);
  font-size:var(--fs-body);
  line-height:1.5;
  color:var(--armature);
  background:var(--pulp-shade);
  border:1px solid var(--pulp-line);
  border-radius:2px;
  padding:0.7rem 0.85rem;
}
.field textarea{ min-height:9rem; resize:vertical; }

.form__note{
  font-size:var(--fs-small);
  color:var(--ink-quiet);
  max-width:46ch;
  margin-top:var(--u);
}
.form__status{
  font-family:var(--face-mono);
  font-size:var(--fs-mono-s);
  letter-spacing:0.11em;
  text-transform:uppercase;
  line-height:1.7;
  margin-top:var(--u);
  padding:0.85rem 1rem;
  border:1px solid var(--pulp-line);
  border-left:3px solid var(--trinidad);
  background:var(--pulp-shade);
}
.form__status[hidden]{ display:none !important; }

.honey{
  position:absolute; left:-9999px;
  width:1px; height:1px; overflow:hidden;
}

/* ---- 14. Photo plates ------------------------------------ */
/* A figure with no <img> renders nothing at all — no dashed
   box, no grey rectangle, no "photo coming".

   TO PLACE A PHOTO LATER: paste an <img src="..." alt="..."> as
   the first child of the <figure>. The plate is floated out of
   the prose column, so nothing around it moves — the paragraph
   text simply reflows beside it.

   Target for the whole site is eight photographs. Eight. */

.plate{ display:none; }

.plate:has(img){
  display:block;
  float:right;
  clear:both;
  width:min(21rem, 44%);
  margin:0.35rem 0 var(--u) var(--u2);
}
.plate--left:has(img){
  float:left;
  margin:0.35rem var(--u2) var(--u) 0;
}
/* Between plan-block entries the readable column is only 46rem wide,
   so a float would leave a twenty-character measure beside it. These
   sit in the flow instead. */
.plate--block:has(img),
.plate--block.plate--left:has(img){
  float:none;
  width:min(30rem, 100%);
  margin:0 0 var(--u3);
}

@media (max-width: 44rem){
  .plate:has(img),
  .plate--left:has(img){
    float:none;
    width:100%;
    margin:var(--u2) 0;
  }
}

/* Photographs inside the writing are strung with the same pennants
   as the section dividers, above and below, so a picture dropped into
   a paragraph reads as part of the parade rather than as an upload. */
.plate:has(img)::before,
.plate:has(img)::after{
  content:"";
  display:block;
  height:13px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='22' viewBox='0 0 200 22'%3E%3Cpolygon points='0,0 40,0 20,22' fill='%23D8412B'/%3E%3Cpolygon points='40,0 80,0 60,22' fill='%23E8901F'/%3E%3Cpolygon points='80,0 120,0 100,22' fill='%23E3B23C'/%3E%3Cpolygon points='120,0 160,0 140,22' fill='%237A8A3A'/%3E%3Cpolygon points='160,0 200,0 180,22' fill='%234A7FBF'/%3E%3C/svg%3E");
  background-repeat:repeat-x;
  background-size:118px 13px;
}
.plate:has(img)::before{ margin-bottom:0.55rem; }
.plate:has(img)::after{
  transform:scaleY(-1);
  margin-top:0.7rem;
}

/* One shared treatment so photographs from three different cameras
   read as one set. A hair of lift, nothing more — his work is already
   saturated, and washing it out is precisely what the old site did. */
.plate img{
  width:100%;
  border:1px solid var(--rule);
  filter:saturate(1.04) contrast(1.03);
}
.plate figcaption{
  font-family:var(--face-mono);
  font-size:var(--fs-mono-s);
  letter-spacing:0.06em;
  line-height:1.65;
  color:var(--ink-quiet);
  margin-top:0.6rem;
  padding-left:0.75rem;
  border-left:1px solid var(--rule);
}

/* ---- 15. Footer ------------------------------------------ */

.footer{
  background-color:var(--night);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='t'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23t)' opacity='0.05' fill='%23ffffff'/%3E%3C/svg%3E");
  --ink:       #E4E0D6;
  --ink-quiet: #9AA0A2;
  --rule:      var(--night-line);
  --accent:    var(--lit-gold);
  color:var(--ink);
  padding-block:var(--u3) var(--u2);
  margin-top:auto;
}

.footer__grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(13rem, 1fr));
  gap:var(--u2);
  padding-bottom:var(--u2);
  border-bottom:1px solid var(--rule);
}
.footer h2{
  font-family:var(--face-mono);
  font-size:var(--fs-mono-s);
  font-weight:400;
  font-variation-settings:normal;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--ink-quiet);
  margin:0 0 var(--u);
}
.footer ul{ list-style:none; margin:0; padding:0; }
.footer li{ margin:0 0 0.6rem; }
.footer a{ font-size:var(--fs-small); }
.footer__blurb{ font-size:var(--fs-small); max-width:32ch; }

.footer__base{
  display:flex; flex-wrap:wrap; align-items:center;
  justify-content:space-between; gap:var(--u);
  padding-top:var(--u2);
  font-family:var(--face-mono);
  font-size:var(--fs-mono-s);
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--ink-quiet);
}
.footer__base a{ text-decoration-color:var(--night-line); }
.footer__base p{ margin:0; }

/* ---- 16. Your Mind's Eye --------------------------------- */

.eye{
  background:none; border:0; padding:0.35rem;
  cursor:pointer;
  color:var(--ink);
  opacity:0.34;
  line-height:0;
  transition:opacity .2s ease;
  border-radius:2px;
}
.eye:hover,
.eye:focus-visible{ opacity:1; }
.eye:hover .eye__iris,
.eye:focus-visible .eye__iris{ fill:var(--dandelion); }
.eye svg{ width:30px; height:auto; }
.eye__iris{ fill:currentColor; transition:fill .2s ease; }

.me{
  position:fixed; inset:0; z-index:80;
  display:grid; place-items:center;
  padding:var(--gutter);
  background:rgba(26,30,36,.78);
}
.me[hidden]{ display:none !important; }

.me__panel{
  background:var(--pulp);
  color:var(--armature);
  --ink:var(--armature);
  --ink-quiet:#5C635C;
  --rule:var(--pulp-line);
  border:1px solid var(--pulp-line);
  border-radius:3px;
  width:min(100%, 40rem);
  max-height:min(88vh, 46rem);
  overflow:auto;
  padding:clamp(1.5rem, 1rem + 2vw, 2.5rem);
  box-shadow:0 24px 60px rgba(26,30,36,.45);
}
.me__head{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:var(--u); margin-bottom:var(--u2);
}
.me__title{
  font-family:var(--face-display);
  font-size:var(--fs-h3);
  font-weight:600;
  margin:0;
}
.me__close{
  background:none;
  border:1px solid var(--pulp-line);
  border-radius:2px;
  font-family:var(--face-mono);
  font-size:var(--fs-mono-s);
  letter-spacing:0.11em;
  text-transform:uppercase;
  color:var(--armature);
  padding:0.4rem 0.7rem;
  cursor:pointer;
}
.me__prompt{
  font-family:var(--face-display);
  font-size:clamp(1.125rem, 1rem + 0.6vw, 1.4375rem);
  font-weight:500;
  line-height:1.2;
  margin:0 0 var(--u);
  text-wrap:balance;
}
.me__log{
  list-style:none;
  margin:var(--u2) 0 0;
  padding:var(--u) 0 0;
  border-top:1px solid var(--pulp-line);
}
.me__entry{ padding:var(--u) 0; border-bottom:1px solid var(--pulp-line); }
.me__entry:last-child{ border-bottom:0; }
.me__entry-meta{
  font-family:var(--face-mono);
  font-size:var(--fs-mono-s);
  letter-spacing:0.11em;
  text-transform:uppercase;
  color:var(--ink-quiet);
  display:flex; flex-wrap:wrap; gap:0.4rem 1rem;
  margin-bottom:0.45rem;
}
.me__id{ color:var(--armature); font-weight:700; }
.me__status{
  border:1px solid var(--pulp-line);
  border-radius:999px;
  padding:0.05rem 0.6rem;
}
.me__entry p{ margin:0; font-size:var(--fs-small); white-space:pre-wrap; }
.me__empty{ font-size:var(--fs-small); color:var(--ink-quiet); }
.me__foot{
  font-size:var(--fs-small);
  color:var(--ink-quiet);
  margin-top:var(--u);
  max-width:46ch;
}

/* ---- Your Mind's Eye: the picker ------------------------- */
/* The board mirrors the site: one thread per page, so a note about the
   gallery is filed with the gallery. */

.me__lead{
  font-family:var(--face-display);
  font-size:clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem);
  line-height:1.06;
  margin:0 0 var(--u);
}

.me__you{
  font-family:var(--face-mono);
  font-size:var(--fs-mono-s);
  letter-spacing:0.1em;
  text-transform:uppercase;
  padding:0.25rem 0.55rem;
  border-radius:2px;
  margin-left:auto;
  margin-right:var(--u-half);
  white-space:nowrap;
}
.me__you--ian{  background:var(--flag-amber);    color:#2A1B04; }
.me__you--sean{ background:var(--flag-twilight); color:#08131F; }
.me__you[hidden]{ display:none !important; }

.me__chans{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(9.5rem, 1fr));
  gap:1px;
  background:var(--pulp-line);
  border:1px solid var(--pulp-line);
}
.me__chans--other{ margin-top:var(--u); }

.me__ch{
  display:flex; align-items:baseline; justify-content:space-between; gap:0.5rem;
  background:var(--pulp);
  border:0;
  border-left:3px solid transparent;
  padding:0.7rem 0.75rem;
  cursor:pointer;
  text-align:left;
  font-family:var(--face-mono);
  font-size:var(--fs-mono-s);
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--armature);
}
.me__ch:hover{ background:var(--pulp-shade); }
.me__ch.has-any{ border-left-color:var(--flag-amber); }
.me__ch.is-here{ background:var(--pulp-shade); border-left-color:var(--flag-ember); }
.me__ch.is-here .me__ch-name::after{
  content:" •";
  color:var(--ink-ember);
}
.me__ch-count{
  font-weight:700;
  color:var(--ink-amber);
}

.me__roomhead{
  display:flex; align-items:center; gap:var(--u-half);
  margin-bottom:var(--u-half);
  padding-bottom:var(--u-half);
  border-bottom:1px solid var(--pulp-line);
}
.me__back{
  background:none;
  border:1px solid var(--pulp-line);
  border-radius:2px;
  font-family:var(--face-mono);
  font-size:var(--fs-mono-s);
  letter-spacing:0.09em;
  text-transform:uppercase;
  color:var(--ink-quiet);
  padding:0.35rem 0.6rem;
  cursor:pointer;
}
.me__back:hover{ background:var(--armature); color:var(--pulp); border-color:var(--armature); }
.me__roomname{
  font-family:var(--face-display);
  font-size:var(--fs-h3);
  line-height:1;
}
.me__visit{
  margin-left:auto;
  font-family:var(--face-mono);
  font-size:var(--fs-mono-s);
  letter-spacing:0.09em;
  text-transform:uppercase;
  color:var(--ink-quiet);
}
.me__visit[hidden]{ display:none !important; }

/* ---- Your Mind's Eye: the thread ------------------------- */
/* Two people talking, with photographs, that ends in a file. */

.me__thread{
  max-height:min(46vh, 24rem);
  overflow-y:auto;
  overscroll-behavior:contain;
  padding:var(--u-half) var(--u-half) var(--u-half) 0;
  margin-bottom:var(--u);
  border-top:1px solid var(--pulp-line);
  border-bottom:1px solid var(--pulp-line);
}
.me__thread.is-over{ background:rgba(232,144,31,.08); }

.me__msg{
  padding:var(--u-half) 0;
  border-bottom:1px solid rgba(184,178,162,.45);
}
.me__msg:last-child{ border-bottom:0; }

.me__msg-head{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:0.5rem 0.75rem;
  font-family:var(--face-mono);
  font-size:var(--fs-mono-s);
  letter-spacing:0.06em;
  margin-bottom:0.3rem;
}
.me__who{
  text-transform:uppercase;
  letter-spacing:0.12em;
  font-weight:700;
  color:var(--ink-amber);
}
.me__msg--sean .me__who{ color:var(--ink-twilight); }
.me__when,
.me__ref{ color:var(--ink-quiet); }
.me__ref{ margin-left:auto; }

.me__said{
  margin:0 !important;
  font-size:var(--fs-small);
  white-space:pre-wrap;
}

.me__thumb{
  width:100%;
  max-width:15rem;
  border:1px solid var(--pulp-line);
  margin:0.2rem 0 0.35rem;
}
.me__filename{
  font-family:var(--face-mono);
  font-size:var(--fs-mono-s);
  color:var(--ink-quiet);
  margin:0 0 0.3rem !important;
}

/* the box you type in */
.me__compose{ margin:0; }
.me__compose textarea{
  width:100%;
  font-family:var(--face-body);
  font-size:var(--fs-body);
  line-height:1.5;
  color:var(--armature);
  background:var(--pulp-shade);
  border:1px solid var(--pulp-line);
  border-radius:2px;
  padding:0.65rem 0.8rem;
  resize:vertical;
  min-height:3.5rem;
}
.me__compose-row{
  display:flex; align-items:center; gap:var(--u-half);
  margin-top:var(--u-half);
}
.me__attach{
  font-family:var(--face-mono);
  font-size:var(--fs-mono-s);
  letter-spacing:0.1em;
  text-transform:uppercase;
  background:none;
  border:1px dashed var(--pulp-line);
  border-radius:2px;
  color:var(--ink-quiet);
  padding:0.75rem 0.9rem;
  cursor:pointer;
}
.me__attach:hover{ border-color:var(--flag-amber); color:var(--armature); }
.me__compose-row .btn{ margin-left:auto; }

.me__queue{ list-style:none; margin:0 0 var(--u-half); padding:0; }
.me__qitem{
  display:flex; align-items:center; gap:0.75rem;
  padding:0.4rem 0;
  border-bottom:1px solid var(--pulp-line);
  font-family:var(--face-mono);
  font-size:var(--fs-mono-s);
}
.me__qitem > span:first-child{
  flex:1 1 auto; min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.me__qmeta{ color:var(--ink-quiet); }
.me__qremove{
  background:none; border:0; cursor:pointer;
  color:var(--ink-quiet); font-size:1.1rem; line-height:1;
  padding:0 0.25rem;
}
.me__qremove:hover{ color:var(--ink-ember); }

/* getting it out */
.me__tools{
  display:flex; flex-wrap:wrap; align-items:center; gap:var(--u-half);
  margin-top:var(--u);
  padding-top:var(--u-half);
  border-top:1px solid var(--pulp-line);
}
.me__tool{
  font-family:var(--face-mono);
  font-size:var(--fs-mono-s);
  letter-spacing:0.1em;
  text-transform:uppercase;
  background:none;
  border:1px solid var(--armature);
  border-radius:2px;
  color:var(--armature);
  padding:0.4rem 0.7rem;
  cursor:pointer;
}
.me__tool:hover{ background:var(--armature); color:var(--pulp); }
.me__tool[hidden]{ display:none !important; }
.me__where{
  margin-left:auto;
  font-family:var(--face-mono);
  font-size:var(--fs-mono-s);
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--ink-quiet);
}

body.is-locked{ overflow:hidden; }

/* ---- 17. Utilities --------------------------------------- */

.stack > * + *{ margin-top:var(--u); }
.stack-2 > * + *{ margin-top:var(--u2); }
.cols{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(18rem, 1fr));
  gap:var(--u2);
}
.cols--sidebar{ grid-template-columns:minmax(0,1.55fr) minmax(0,1fr); }
@media (max-width: 52rem){
  .cols--sidebar{ grid-template-columns:1fr; }
}
.max-h2{ max-width:24ch; }
.center-cta{ margin-top:var(--u2); }


/* Links that leave the site say so.

   Opening a new tab without warning is a genuine usability complaint —
   the back button stops working the way people expect. The arrow is the
   warning. Skipped on .out, which already ends in an arrow of its own,
   and on buttons. */
a[target="_blank"]:not(.out):not(.btn)::after{
  content:"↗";
  display:inline-block;
  margin-left:0.22em;
  font-size:0.8em;
  line-height:1;
  vertical-align:baseline;
  color:var(--ink-quiet);
  text-decoration:none;
}
.footer a[target="_blank"]::after{ color:var(--ink-quiet); }

/* ---- The gallery ----------------------------------------- */
/* Columns rather than a grid, because his photographs are a mix of
   portrait and landscape and a grid would either crop them or leave
   holes. Nothing is cropped here. */

.shots{
  columns:3;
  column-gap:var(--u);
}
@media (max-width: 60rem){ .shots{ columns:2; } }
@media (max-width: 34rem){ .shots{ columns:1; } }

.shot{
  margin:0 0 var(--u);
  break-inside:avoid;
  page-break-inside:avoid;   /* older engines */
}
.shot img{
  width:100%;
  height:auto;
  border:1px solid var(--pulp-line);
  filter:saturate(1.04) contrast(1.03);
  background:var(--pulp-shade);   /* holds the space while it loads */
}
.shot figcaption{
  font-family:var(--face-mono);
  font-size:var(--fs-mono-s);
  letter-spacing:0.06em;
  line-height:1.6;
  color:var(--ink-quiet);
  margin-top:0.5rem;
}

/* ---- 18. Parade devices ---------------------------------- */
/* The one piece of ornament on the site, and it earns its place:
   this is a man who has spent twenty-five years making things that
   go down the middle of a street. Pure CSS, no image file — the
   pennants are an inline SVG in his own five colours. */

.bunting{
  height:22px;
  border-top:1px solid var(--rule);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='22' viewBox='0 0 200 22'%3E%3Cpolygon points='0,0 40,0 20,22' fill='%23D8412B'/%3E%3Cpolygon points='40,0 80,0 60,22' fill='%23E8901F'/%3E%3Cpolygon points='80,0 120,0 100,22' fill='%23E3B23C'/%3E%3Cpolygon points='120,0 160,0 140,22' fill='%237A8A3A'/%3E%3Cpolygon points='160,0 200,0 180,22' fill='%234A7FBF'/%3E%3C/svg%3E");
  background-repeat:repeat-x;
  background-position:left top;
  background-size:200px 22px;
}

/* Per-section accent. --accent drives the eyebrow and the STATUS
   field, both of which are small text, so each ground gets the
   variant that clears contrast on it and no other. */
.acc-ember   { --accent:var(--ink-ember); }
.acc-amber   { --accent:var(--ink-amber); }
.acc-twilight{ --accent:var(--ink-twilight); }
.acc-gold    { --accent:var(--ink-gold); }
.acc-moss    { --accent:var(--ink-moss); }

.band--night.acc-ember   { --accent:var(--lit-ember); }
.band--night.acc-amber   { --accent:var(--lit-amber); }
.band--night.acc-twilight{ --accent:var(--lit-twilight); }
.band--night.acc-gold    { --accent:var(--lit-gold); }
.band--night.acc-moss    { --accent:var(--lit-moss); }

/* Range rows carry a pennant in each of the five colours, so the
   inventory of what he can do is also the parade. */
.range .what::before{
  content:"";
  display:inline-block;
  width:0.62em; height:0.62em;
  margin-right:0.75em;
  background:var(--mark, var(--flag-ember));
  clip-path:polygon(0 0, 100% 0, 50% 100%);
  vertical-align:baseline;
}
.range li:nth-child(5n+1){ --mark:var(--flag-ember); }
.range li:nth-child(5n+2){ --mark:var(--flag-amber); }
.range li:nth-child(5n+3){ --mark:var(--flag-gold); }
.range li:nth-child(5n+4){ --mark:var(--flag-moss); }
.range li:nth-child(5n+5){ --mark:var(--flag-twilight); }

/* ---- 19. The night hero ---------------------------------- */
/* His own photograph, at night, with the lanterns lit. It is the
   single most convincing thing he owns and it was sitting four
   clicks deep on a page called new-gallery-5. */

.hero--photo{
  position:relative;
  isolation:isolate;
  min-height:min(84vh, 44rem);
  display:flex;
  align-items:flex-end;
  overflow:hidden;
  background:var(--night);
  padding-block:var(--u3);
  --ink:#F4F1E9;
  --ink-quiet:#C7C1B4;
  --rule:rgba(244,241,233,.28);
  color:var(--ink);
}
.hero__img{
  position:absolute; inset:0; z-index:-2;
  width:100%; height:100%;
  object-fit:cover;
  object-position:center 45%;
}
/* Two gradients, not one. The vertical pass seats the type; the
   horizontal pass darkens only the left, so the words stay legible
   over the lit jellyfish while the right of the photograph keeps
   its light. */
.hero__scrim{
  position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(to right,
      rgba(11,13,17,.86)  0%,
      rgba(11,13,17,.62) 30%,
      rgba(11,13,17,.22) 58%,
      rgba(11,13,17,0)   82%),
    linear-gradient(to top,
      rgba(11,13,17,.80)  0%,
      rgba(11,13,17,.46) 38%,
      rgba(11,13,17,.20) 70%,
      rgba(11,13,17,.42) 100%);
}
.hero--photo .hero__name{
  color:#F7F4EC;
  text-shadow:0 2px 28px rgba(0,0,0,.55);
  margin-bottom:var(--u-half);
}
.hero--photo .hero__thesis{ color:#F4F1E9; margin-bottom:var(--u); }
.hero--photo .hero__thesis span + span{ color:var(--lit-amber); }
.hero--photo .lede{ color:#EDE9DF; max-width:46ch; }
.hero__credit{
  position:absolute;
  right:var(--gutter); bottom:0.65rem;
  z-index:1;
  font-family:var(--face-mono);
  font-size:var(--fs-mono-s);
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:rgba(244,241,233,.5);
}
@media (max-width: 44rem){
  .hero--photo{ min-height:min(78vh, 34rem); }
  .hero__credit{ display:none; }
}

/* A photograph running the full width of the page, used once or
   twice per page to break the column. Same treatment as the plates. */
.strip{
  position:relative;
  line-height:0;
  background:var(--night);
}
.strip img{
  width:100%;
  height:clamp(14rem, 34vw, 26rem);
  object-fit:cover;
  filter:saturate(1.04) contrast(1.03);
}
.strip figcaption{
  font-family:var(--face-mono);
  font-size:var(--fs-mono-s);
  letter-spacing:0.08em;
  line-height:1.7;
  color:var(--ink-quiet);
  padding:0.7rem var(--gutter) 0;
  max-width:60ch;
}