@charset "UTF-8";
/* ============================================================
   North Island portfolio — dark "morgue" skin.
   Carried over from newspaper/site: hood ground, Newsreader at
   low weight for display, IBM Plex Mono as the apparatus layer,
   one amber accent. The page is a catalogue, not a pitch.
   ============================================================ */

:root{
  --hood:#131417;
  --hood-2:#1B1C20;
  --rule:#2C2E34;
  --paper:#E7E3D8;
  --prose:#CFCBC1;
  --dim:#8A8983;
  --dimmer:#7A796F;
  --lamp:#C89B4A;
  --max:1100px;
  --gutter:32px;
  --serif:"Newsreader",Georgia,serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--hood);color:var(--paper);
  font-family:var(--serif);font-weight:300;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;overflow-x:hidden;
}
a{color:inherit;text-decoration:none;transition:color .2s ease}
.container{max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}

/* ─── masthead ─────────────────────────────────────────────── */
.masthead{
  position:sticky;top:0;z-index:10;display:flex;align-items:baseline;
  justify-content:space-between;gap:18px;padding:22px var(--gutter);
  border-bottom:1px solid var(--rule);
  background:rgba(19,20,23,.88);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.masthead-nav{display:flex;gap:22px;font-family:var(--mono);font-size:11px;
  text-transform:uppercase;letter-spacing:.18em;color:var(--dim)}
/* On the index there is nothing to the left of the nav, so keep it right. */
.masthead-nav:only-child{margin-left:auto}
.masthead-nav a:hover{color:var(--lamp)}
.masthead-back{
  font-family:var(--mono);font-size:11px;text-transform:uppercase;
  letter-spacing:.18em;color:var(--dim);
}
.masthead-back:hover{color:var(--lamp)}

/* ─── cover ────────────────────────────────────────────────── */
.cover{padding-block:88px 72px}
.cover-meta{
  display:flex;flex-wrap:wrap;gap:14px;font-family:var(--mono);font-size:11px;
  text-transform:uppercase;letter-spacing:.18em;color:var(--dim);
  border-bottom:1px solid var(--rule);padding-bottom:18px;margin-bottom:56px;
}
.standfirst{max-width:52ch}
.standfirst p{
  font-size:clamp(21px,2.1vw,27px);line-height:1.5;letter-spacing:-.012em;
  color:var(--paper);font-weight:200;margin:0 0 22px;
}
.standfirst em{font-style:italic;color:var(--lamp);font-weight:300}
.standfirst .fine{
  font-family:var(--mono);font-size:11px;text-transform:uppercase;
  letter-spacing:.18em;color:var(--dim);font-weight:400;
}

/* ─── index: the numbered ledger ───────────────────────────── */
.index{padding-block:0 72px}
.index-head{
  display:flex;align-items:baseline;gap:18px;
  border-bottom:1px solid var(--rule);padding-bottom:14px;margin-bottom:8px;
}
.kicker{font-family:var(--mono);font-size:11px;text-transform:uppercase;
  letter-spacing:.18em;color:var(--dim)}
.index-head .count{margin-left:auto;font-family:var(--mono);font-size:11px;
  letter-spacing:.14em;color:var(--dimmer);font-variant-numeric:tabular-nums}

.work{border-bottom:1px solid var(--rule)}

/* The whole row is the toggle. Native <details>, so it is keyboard
   operable and works with JS off; the default disclosure triangle is
   suppressed in favour of the mono +/x in the last column. */
.work-head{
  display:grid;
  grid-template-columns:56px minmax(0,1fr) minmax(0,19rem) 9.25rem 2.5rem;
  gap:0 28px;align-items:baseline;
  padding:26px 0;cursor:pointer;list-style:none;
  transition:background .25s ease;
}
.work-head::-webkit-details-marker{display:none}
.work-head::marker{content:""}
.work-head:hover{background:var(--hood-2)}
.work-head:focus-visible{outline:1px solid var(--lamp);outline-offset:-1px}

.folio{
  font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.14em;
  color:var(--dimmer);font-variant-numeric:tabular-nums;transition:color .25s ease;
}
.work-head:hover .folio,.work[open] .folio{color:var(--lamp)}
.work-name{
  font-size:clamp(30px,3.6vw,46px);line-height:1.02;letter-spacing:-.03em;
  font-weight:200;margin:0;transition:color .25s ease;
}
.work-head:hover .work-name,.work[open] .work-name{color:var(--lamp)}
.work-note{font-size:15.5px;line-height:1.64;color:var(--prose);margin:0}
.work-meta{
  font-family:var(--mono);font-size:11px;text-transform:uppercase;
  letter-spacing:.13em;color:var(--dim);text-align:right;
  font-variant-numeric:tabular-nums;line-height:1.9;
}
.work-meta .live{color:var(--lamp)}

.work-toggle{
  font-family:var(--mono);font-size:17px;font-weight:400;line-height:1;
  color:var(--dimmer);justify-self:end;
  transition:transform .25s ease,color .25s ease;
}
.work-head:hover .work-toggle{color:var(--lamp)}
.work[open] .work-toggle{transform:rotate(45deg);color:var(--lamp)}

/* unfurled panel */
.work-detail{
  display:grid;grid-template-columns:56px minmax(0,1fr);gap:0 28px;
  padding:4px 0 34px;
}
.work-detail-body{grid-column:2;max-width:62ch}
.work-detail-body p{font-size:16px;line-height:1.72;color:var(--prose);margin:0 0 16px}
.work-detail-body p:last-of-type{margin-bottom:0}
.work-links{
  display:flex;flex-wrap:wrap;gap:22px;margin-top:22px;
  font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.16em;
}
.work-links a{color:var(--lamp);border-bottom:1px solid transparent;padding-bottom:2px}
.work-links a:hover{border-bottom-color:var(--lamp)}
.work-links .muted{color:var(--dimmer)}

/* ─── draft marker ─────────────────────────────────────────────
   Anything written by Claude and not yet reviewed by Jonathan
   carries this, so unreviewed copy is never mistaken for final. */
.draft{
  display:inline-block;font-family:var(--mono);font-size:10px;
  text-transform:uppercase;letter-spacing:.16em;color:var(--hood);
  background:var(--dimmer);padding:3px 7px;border-radius:2px;
  margin-bottom:14px;
}
.draft-note{
  font-family:var(--mono);font-size:11px;line-height:1.7;letter-spacing:.02em;
  color:var(--dimmer);border-left:1px solid var(--rule);
  padding:2px 0 2px 16px;margin:22px 0 0;
}

/* ─── work detail page ─────────────────────────────────────── */
.entry{padding-block:80px 40px}
.entry-folio{
  font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--dimmer);border-bottom:1px solid var(--rule);
  padding-bottom:18px;margin-bottom:52px;display:flex;gap:14px;flex-wrap:wrap;
}
.entry-folio .lamp{color:var(--lamp)}
.entry-title{
  font-size:clamp(46px,7vw,88px);line-height:.98;letter-spacing:-.035em;
  font-weight:200;margin:0 0 28px;
}
.entry-lede{
  font-size:clamp(19px,1.9vw,24px);line-height:1.55;letter-spacing:-.012em;
  font-weight:200;color:var(--paper);max-width:46ch;margin:0;
}
.entry-facts{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));
  gap:28px 32px;margin:56px 0 0;padding-top:28px;
  border-top:1px solid var(--rule);
}
.entry-facts dt{
  font-family:var(--mono);font-size:10px;text-transform:uppercase;
  letter-spacing:.18em;color:var(--dimmer);margin-bottom:8px;
}
.entry-facts dd{margin:0;font-size:16px;color:var(--prose);font-variant-numeric:tabular-nums}
.entry-facts dd a{color:var(--lamp)}
.entry-facts dd a:hover{border-bottom:1px solid var(--lamp)}

/* Measure goes on the children, not on .entry-body itself — .entry-body is also
   a .container, and a max-width here would beat the container's and then get
   centred by its `margin:0 auto`, pulling the whole body off the title's edge. */
.entry-body{padding-block:0 88px}
.entry-body > :not(.entry-nav){max-width:62ch}
.entry-body h2{
  font-family:var(--mono);font-size:11px;text-transform:uppercase;
  letter-spacing:.18em;color:var(--dim);font-weight:500;
  margin:56px 0 18px;padding-bottom:12px;border-bottom:1px solid var(--rule);
}
.entry-body h2:first-child{margin-top:0}
.entry-body p{font-size:17px;line-height:1.75;color:var(--prose);margin:0 0 18px}
.entry-body em{font-style:italic;color:var(--lamp)}
.entry-body ul{margin:0 0 18px;padding-left:0;list-style:none}
.entry-body li{
  font-size:16px;line-height:1.7;color:var(--prose);
  padding:10px 0 10px 22px;border-bottom:1px solid var(--rule);position:relative;
}
.entry-body li::before{
  content:"—";position:absolute;left:0;color:var(--dimmer);
}

.entry-nav{
  border-top:1px solid var(--rule);padding-block:28px 0;margin-top:16px;
  display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;
  font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.16em;
  color:var(--dim);
}
.entry-nav a:hover{color:var(--lamp)}

/* ─── colophon ─────────────────────────────────────────────── */
.colophon{
  border-top:1px solid var(--rule);padding:48px var(--gutter) 72px;
  font-family:var(--mono);font-size:11px;text-transform:uppercase;
  letter-spacing:.18em;color:var(--dim);
}
.colophon-grid{max-width:var(--max);margin:0 auto;display:grid;
  grid-template-columns:1fr 1fr 1fr;gap:32px}
.colophon-grid p{margin:0 0 6px;line-height:1.7}
.colophon-grid .muted-line{color:var(--dimmer)}
.colophon a:hover{color:var(--lamp)}

/* ─── narrow ───────────────────────────────────────────────── */
@media(max-width:960px){
  .work-head{grid-template-columns:44px minmax(0,1fr) 2.5rem;gap:0 20px}
  .work-note{grid-column:2;margin-top:12px}
  .work-meta{grid-column:2;text-align:left;margin-top:10px}
  .work-toggle{grid-column:3;grid-row:1}
  .work-detail{grid-template-columns:44px minmax(0,1fr);gap:0 20px}
}
@media(max-width:720px){
  .colophon-grid{grid-template-columns:1fr;gap:18px}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}