/*
  pictonnz.co.nz — editorial stylesheet
  A crafted long-form publication: serif headings on a sans body, measured
  line length, numbered sections, a contents rail styled like a book's
  table of contents, and a printer's colour bar for a signature that has
  nothing to do with a departures board, a ledger, or a storefront.
  System fonts only (no webfont fetches — keeps the Pi fast).
  Light/dark via prefers-color-scheme, no JS toggle required.
*/

/* ---------- design tokens ---------- */
:root{
  --paper:      #faf6ee;
  --paper-raised:#f2ead9;
  --ink:        #241f16;
  --ink-soft:   #5b5342;
  --ink-faint:  #726950;   /* 5.06:1 on paper, 4.56:1 on raised — do not lighten */
  --line:       #ddd2b8;
  --accent:     #1f5f5b;   /* harbour teal */
  --accent-ink: #ffffff;
  --accent-soft:#e4efec;
  --rust:       #a34e2c;   /* terracotta, secondary accent */
  --focus:      #1f5f5b;
  --shadow:     0 1px 2px rgba(36,31,22,.08), 0 10px 28px -14px rgba(36,31,22,.22);
  --shadow-lg:  0 2px 4px rgba(36,31,22,.10), 0 24px 48px -20px rgba(36,31,22,.28);
  --serif: "Iowan Old Style","Palatino Linotype","URW Palladio L",P052,serif;
  --sans:  -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:  ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --measure:      36em;   /* body-copy column: a measured, readable line */
  --measure-wide: 40em;   /* lead/dek material, a touch more air */
  --radius: 2px;
  --radius-lg: 4px;
}

@media (prefers-color-scheme: dark){
  :root{
    --paper:      #17170f;
    --paper-raised:#201f16;
    --ink:        #ece5d3;
    --ink-soft:   #b9b092;
    --ink-faint:  #8e856c;   /* 4.91:1 on paper, 4.51:1 on raised — do not lighten */
    --line:       #3a3626;
    --accent:     #6fbdb5;
    --accent-ink: #0d1c1a;
    --accent-soft:#1c2e2b;
    --rust:       #e3906a;
    --focus:      #6fbdb5;
    --shadow:     0 1px 2px rgba(0,0,0,.35), 0 10px 28px -14px rgba(0,0,0,.55);
    --shadow-lg:  0 2px 4px rgba(0,0,0,.4), 0 24px 48px -20px rgba(0,0,0,.6);
  }
}

/* ---------- reset-ish ---------- */
*,*::before,*::after{ box-sizing: border-box; }
html{ color-scheme: light dark; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:1.0625rem;
  line-height:1.65;
  text-rendering:optimizeLegibility;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:var(--accent); text-decoration-thickness:1px; text-underline-offset:.15em; }
a:hover{ text-decoration-thickness:2px; }
:focus-visible{ outline:3px solid var(--focus); outline-offset:2px; }
h1,h2,h3,h4{ font-family:var(--serif); font-weight:600; line-height:1.15; color:var(--ink); }
h1{ font-size:clamp(2.15rem,2.6vw + 1.3rem,3.6rem); letter-spacing:-.015em; }
h2{ font-size:clamp(1.5rem,1.1vw + 1.2rem,2rem); }
h3{ font-size:1.28rem; margin-top:1.9em; }
p,ul,ol,dl,table,figure,blockquote{ margin:0 0 1.25em; }
ul,ol{ padding-left:1.3em; }
li + li{ margin-top:.35em; }
hr{ border:0; border-top:1px solid var(--line); margin:2.5em 0; }
small{ color:var(--ink-soft); }

/* ---------- printer's colour bar ---------- */
/* A purely decorative registration strip — the site's one recurring visual
   signature. Repeats at the top of every page and echoed, thinner, in the
   footer, like the colour bar on a printer's proof. */
.colour-bar{
  height:6px;
  background: repeating-linear-gradient(
    90deg,
    var(--accent) 0, var(--accent) 15px,
    var(--rust) 15px, var(--rust) 21px,
    var(--paper-raised) 21px, var(--paper-raised) 36px
  );
}

/* ---------- skip link ---------- */
.skip-link{
  position:absolute; left:-999px; top:auto;
  background:var(--accent); color:var(--accent-ink);
  padding:.75em 1.2em; border-radius:var(--radius); z-index:100;
}
.skip-link:focus{ left:1em; top:1em; }

/* ---------- masthead ---------- */
.masthead{
  border-bottom:1px solid var(--line);
  background:var(--paper);
}
.masthead__inner{
  max-width:76rem; margin:0 auto; padding:1.5rem 1.25rem 0;
}
.masthead__top{
  display:flex; align-items:baseline; justify-content:space-between;
  flex-wrap:wrap; gap:.5rem 1.5rem;
}
.masthead__name{
  font-family:var(--serif); font-weight:700; font-size:1.9rem;
  color:var(--ink); text-decoration:none; letter-spacing:-.015em;
}
.masthead__name span{ color:var(--accent); }
.masthead__tagline{
  font-family:var(--serif); font-style:italic; color:var(--ink-soft);
  font-size:1rem; margin:0; padding-left:1.1em; border-left:1px solid var(--line);
}
nav.primary-nav{
  margin-top:1.2rem;
  border-top:1px solid var(--line);
}
nav.primary-nav ul{
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; gap:0;
  font-size:.94rem;
  counter-reset: navitem;
}
nav.primary-nav li{ counter-increment: navitem; }
nav.primary-nav a{
  display:flex; align-items:baseline; gap:.55em;
  padding:.9em 1.15em .9em 0;
  color:var(--ink-soft); text-decoration:none; font-weight:600;
  border-bottom:2px solid transparent;
  margin-bottom:-1px;
}
nav.primary-nav a::before{
  content: counter(navitem, decimal-leading-zero);
  font-family:var(--sans); font-weight:700; font-size:.72em;
  letter-spacing:.02em; color:var(--ink-faint);
}
nav.primary-nav a:hover,
nav.primary-nav a[aria-current="page"]{ color:var(--accent); }
nav.primary-nav a[aria-current="page"]{ border-bottom-color:var(--accent); }
nav.primary-nav a[aria-current="page"]::before{ color:var(--rust); }

/* ---------- page hero ---------- */
.page-hero{ max-width:76rem; margin:0 auto; padding:3rem 1.25rem 0; }
.page-hero__kicker{
  display:flex; align-items:center; gap:.7em;
  font-family:var(--sans); text-transform:uppercase; letter-spacing:.1em;
  font-size:.8rem; font-weight:700; color:var(--rust); margin:0 0 .9em;
}
.page-hero__kicker::before{
  content:""; display:block; width:2rem; height:2px; background:var(--rust);
  flex:0 0 auto;
}
.page-hero h1{ max-width:22ch; }
.page-hero__dek{
  font-family:var(--serif); font-size:1.32rem; font-style:italic; color:var(--ink-soft);
  max-width:var(--measure-wide); margin:.85em 0 0; padding-top:1em;
  border-top:1px solid var(--line);
}
.breadcrumb{
  font-size:.78rem; color:var(--ink-faint); margin:0 0 1.3em;
  text-transform:uppercase; letter-spacing:.06em;
}
.breadcrumb a{ color:var(--ink-faint); }

/* ---------- image placeholders (deliberate, book-plate styled) ---------- */
.placeholder{
  position:relative;
  display:flex; align-items:center; justify-content:center; text-align:center;
  background:
    repeating-linear-gradient(135deg, var(--paper-raised), var(--paper-raised) 10px, var(--paper) 10px, var(--paper) 20px);
  border:1px solid var(--line);
  border-radius:var(--radius);
  color:var(--ink-faint); font-size:.85rem; padding:1.4em;
  margin:0 0 .6em;
}
.placeholder::before,.placeholder::after{
  content:""; position:absolute; width:.85rem; height:.85rem;
  border:1px solid var(--ink-faint); opacity:.6;
}
.placeholder::before{ top:.55em; left:.55em; border-width:1px 0 0 1px; }
.placeholder::after{ bottom:.55em; right:.55em; border-width:0 1px 1px 0; }
.placeholder__label{ max-width:28em; }
.placeholder__label strong{
  display:block; color:var(--ink-soft); font-family:var(--serif); font-style:italic;
  font-size:1rem; margin-bottom:.35em;
}
.placeholder--16x9{ aspect-ratio:16/9; }
.placeholder--21x9{ aspect-ratio:21/9; }
.placeholder--4x3{ aspect-ratio:4/3; }
.placeholder--1x1{ aspect-ratio:1/1; max-width:20rem; }

/* ---------- article layout ---------- */
.article-layout{
  max-width:76rem; margin:0 auto; padding:2.2rem 1.25rem 4.5rem;
  display:grid; grid-template-columns: minmax(0,1fr); gap:2.5rem;
}
@media (min-width:64rem){
  .article-layout{ grid-template-columns: minmax(0,var(--measure)) 15rem; align-items:start; }
  .article-layout:has(> .article:only-child){ grid-template-columns: minmax(0,1fr); }
  .article-layout:has(> .article:only-child) .article{ max-width:46rem; margin:0 auto; }
}
.article{ min-width:0; max-width:var(--measure); counter-reset: section figure; }

/* Numbered section heads — the running "contents" device that ties every
   h2 to its entry in the sidebar rail, without touching a word of copy. */
.article > h2{
  counter-increment: section;
  margin-top:3.2em; padding-top:1.5em; border-top:1px solid var(--line);
}
.article > h2:first-child{ margin-top:0; padding-top:0; border-top:0; }
.article > h2::before{
  content: counter(section, decimal-leading-zero);
  display:block;
  font-family:var(--sans); font-weight:800; font-size:.72rem;
  letter-spacing:.16em; color:var(--rust); margin-bottom:.7em;
}

h3{ color:var(--ink); }
.article h3{ font-size:1.22rem; }

/* Article opener: a drop cap on the true first paragraph of the body copy */
@media (min-width:28em){
  .article > p:first-of-type::first-letter{
    float:left; font-family:var(--serif); font-weight:700;
    font-size:3.4em; line-height:.82; padding:.03em .06em 0 0;
    color:var(--rust);
  }
}
.article > p:first-of-type{ font-size:1.14rem; }
body.page-sources .article > p:first-of-type::first-letter,
body.page-404 .article > p:first-of-type::first-letter{ all:unset; }
body.page-sources .article > h2::before,
body.page-sources .article > h2,
body.page-404 .article > h2::before,
body.page-404 .article > h2{ counter-increment:none; }
body.page-sources .article > h2, body.page-404 .article > h2{ margin-top:2.2em; padding-top:0; border-top:0; }
body.page-sources .article > h2::before, body.page-404 .article > h2::before{ content:none; }

/* ---------- contents rail ---------- */
.toc{
  position:static; border:1px solid var(--line); border-radius:var(--radius);
  background:var(--paper-raised); padding:0;
}
@media (min-width:64rem){
  .toc{ position:sticky; top:1.5rem; }
}
.toc h2{
  margin:0; padding:1rem 1.2rem .8rem;
  font-size:.78rem; font-family:var(--sans); text-transform:uppercase;
  letter-spacing:.09em; color:var(--ink-soft); border-bottom:1px solid var(--line);
}
.toc ol{
  list-style:none; margin:0; padding:.2rem 1.2rem 1rem; font-size:.92rem;
  counter-reset: tocnum;
}
.toc li{ counter-increment: tocnum; margin:0; }
.toc li + li{ border-top:1px solid var(--line); }
.toc a{
  display:flex; align-items:baseline; gap:.75em;
  padding:.7em 0; text-decoration:none; color:var(--ink);
}
.toc a::before{
  content: counter(tocnum, decimal-leading-zero);
  flex:0 0 auto; font-family:var(--serif); font-style:italic;
  font-size:.85rem; color:var(--rust);
}
.toc a:hover{ color:var(--accent); }
.toc a:hover::before{ color:var(--accent); }

/* ---------- editorial furniture ---------- */
blockquote.pull{
  position:relative;
  margin:2rem 0; padding:.15em 0 .15em 1.4em;
  border-left:3px solid var(--rust);
  font-family:var(--serif); font-size:1.4rem; font-style:italic; line-height:1.35;
  color:var(--ink);
}
blockquote.pull p{ margin:0; }
blockquote.pull::before{
  content:"\201C"; position:absolute; left:.1em; top:-.18em;
  font-family:var(--serif); font-style:normal; font-size:2.6rem; line-height:1;
  color:var(--rust); opacity:.5;
}
@media (min-width:64rem){
  blockquote.pull{ margin-left:-1.6rem; padding-left:2.7rem; }
  blockquote.pull::before{ left:1.55rem; }
}

.callout{
  position:relative;
  background:var(--accent-soft); border:1px solid var(--line);
  border-left:4px solid var(--accent);
  border-radius:var(--radius); padding:1.3em 1.4em 1.2em; margin:1.8em 0;
}
.callout h3{ margin-top:0; font-size:1.05rem; }
.callout p:last-child{ margin-bottom:0; }
.callout::before{
  content:"Note"; display:block; margin-bottom:.5em;
  font-family:var(--sans); font-size:.72rem; font-weight:800;
  letter-spacing:.14em; text-transform:uppercase; color:var(--accent);
}
.callout--caution{ border-left-color:var(--rust); }
.callout--caution::before{ content:"Caution"; color:var(--rust); }

.fact-sources{
  font-size:.8rem; color:var(--ink-faint); margin-top:-.4em;
  padding-top:1em; border-top:1px dotted var(--line);
}

table{ width:100%; border-collapse:collapse; font-size:.94rem; }
caption{
  text-align:left; font-family:var(--serif); font-style:italic; color:var(--ink-soft);
  margin-bottom:.6em; caption-side:top;
}
th,td{ text-align:left; padding:.65em .8em; border-bottom:1px solid var(--line); vertical-align:top; }
th{
  font-family:var(--sans); font-size:.74rem; text-transform:uppercase; letter-spacing:.06em;
  color:var(--ink-soft); border-bottom:2px solid var(--ink-soft); font-weight:700;
}
tbody tr:hover{ background:var(--paper-raised); }
td:first-child, th:first-child{ padding-left:0; }
td:last-child, th:last-child{ padding-right:0; }

.card-row{ display:grid; gap:1.2rem; margin:1.8em 0; grid-template-columns:repeat(auto-fit,minmax(15rem,1fr)); }
.card{
  border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:1.3em 1.4em; background:var(--paper-raised);
  border-top:3px solid var(--accent);
}
.card h3{ margin-top:0; font-size:1.08rem; }
.card p:last-child{ margin-bottom:0; }

.btn-link{
  display:inline-flex; align-items:center; gap:.4em;
  background:var(--accent); color:var(--accent-ink);
  padding:.65em 1.15em; border-radius:var(--radius); text-decoration:none;
  font-weight:700; font-size:.92rem; letter-spacing:.01em;
}
.btn-link:hover{ text-decoration:none; opacity:.9; }

.section-links{ list-style:none; padding:0; margin:0; }
.section-links li{ margin:0 0 .3em; }

/* ---------- home page ---------- */
.hero-strip{
  max-width:76rem; margin:0 auto; padding:0 1.25rem 3.2rem;
}
.hero-strip p{
  font-family:var(--serif); font-size:1.38rem; max-width:var(--measure-wide);
  color:var(--ink-soft); margin-top:1.3em;
}
@media (min-width:28em){
  .hero-strip p::first-letter{
    float:left; font-family:var(--serif); font-weight:700; font-style:normal;
    font-size:3.2em; line-height:.8; padding:.04em .07em 0 0; color:var(--rust);
  }
}
.section-grid{
  max-width:76rem; margin:0 auto; padding:0 1.25rem 4rem;
  display:grid; gap:1.6rem; grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));
}
.section-grid__item{
  border-top:3px solid var(--accent); padding-top:1.1rem;
}
.section-grid__item h2{ margin:0 0 .35em; font-size:1.3rem; }
.section-grid__item h2 a{ text-decoration:none; color:var(--ink); }
.section-grid__item h2 a:hover{ color:var(--accent); }
.section-grid__item p{ color:var(--ink-soft); margin:0 0 .7em; }

/* ---------- footer ---------- */
footer.site-footer{
  border-top:1px solid var(--line); margin-top:2rem;
  background:var(--paper-raised);
}
.site-footer__inner{
  max-width:76rem; margin:0 auto; padding:3rem 1.25rem 2.6rem;
  display:grid; gap:2.2rem; grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));
  font-size:.9rem; color:var(--ink-soft);
}
.site-footer__inner h2{
  font-size:.76rem; text-transform:uppercase; letter-spacing:.09em; color:var(--ink);
  font-family:var(--sans); font-weight:800; margin:0 0 .8em; padding-bottom:.6em;
  border-bottom:1px solid var(--line);
}
.site-footer__inner ul{ list-style:none; margin:0; padding:0; }
.site-footer__inner li{ margin:0 0 .4em; }
.site-footer__legal{
  max-width:76rem; margin:0 auto; padding:0 1.25rem 2rem;
  font-size:.78rem; color:var(--ink-faint); border-top:1px solid var(--line); padding-top:1.4rem;
}
.site-footer .colour-bar{ margin-top:1.5rem; height:4px; opacity:.85; }

/* ---------- photo / gallery ---------- */
figure.photo{ margin:0 0 1.8em; }
figure.photo img{ border-radius:var(--radius); width:100%; height:auto; }
.photo__link{ display:block; line-height:0; position:relative; }
.photo__link::after{
  content:""; position:absolute; inset:0; border-radius:var(--radius);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.08);
  pointer-events:none;
}
figure.photo figcaption{
  font-size:.85rem; color:var(--ink-soft); margin-top:.6em; font-family:var(--serif); font-style:italic;
  padding-left:.85em; border-left:2px solid var(--line);
}
.article figure.photo figcaption::before{
  counter-increment: figure;
  content:"Plate " counter(figure) " — ";
  font-family:var(--sans); font-style:normal; font-weight:700; letter-spacing:.02em;
  color:var(--ink-faint); font-size:.86em;
}
.photo__credit{ font-style:normal; color:var(--ink-faint); }
.photo-grid{
  display:grid; gap:1.2rem; margin:1.8em 0;
  grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));
}
.photo-grid figure.photo{ margin:0; }
.hero-strip figure.photo{ margin-bottom:1.6rem; }
.hero-strip figure.photo img,
.hero-strip .placeholder{ box-shadow:var(--shadow-lg); }
.hero-strip figure.photo figcaption{ font-size:.88rem; }

dialog.lightbox{
  border:0; border-radius:var(--radius-lg); padding:0; max-width:min(92vw,64rem);
  background:var(--paper); color:var(--ink); box-shadow:var(--shadow-lg);
}
dialog.lightbox::backdrop{ background:rgba(10,10,8,.82); }
dialog.lightbox img{ display:block; max-width:100%; max-height:78vh; width:auto; height:auto; margin:0 auto; border-radius:var(--radius); }
.lightbox__body{ padding:1.1rem; }
.lightbox__caption{ font-size:.9rem; color:var(--ink-soft); margin:.8em 0 0; font-family:var(--serif); font-style:italic; }
.lightbox__close{
  position:absolute; top:.6rem; right:.6rem; background:var(--paper-raised); border:1px solid var(--line);
  color:var(--ink); border-radius:50%; width:2.2rem; height:2.2rem; font-size:1.1rem; cursor:pointer;
}
.lightbox__close:hover{ background:var(--accent); color:var(--accent-ink); border-color:var(--accent); }

/* ---------- utility ---------- */
.visually-hidden{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}