/* ==========================================================================
   Pencilfy — sketchbook design system
   Palette: warm paper, graphite ink, pencil yellow
   ========================================================================== */

:root {
  /* colour */
  --paper:        #f7f3ea;
  --paper-deep:   #efe9dc;
  --paper-band:   #eae3d3;
  --mat:          #fffdf8;
  --ink:          #26221d;
  --ink-soft:     #5f584e;
  --ink-faint:    #8b8377;
  --rule:         #ddd5c5;
  --pencil:       #e3a81c;
  --pencil-deep:  #c28c0a;
  --pencil-wash:  #fdf3d9;
  --dark:         #23201b;
  --dark-soft:    #322e27;
  --on-dark:      #f2ede2;

  /* type */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Inter", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-hand: "Caveat", "Segoe Script", cursive;

  /* rhythm */
  --wrap: 1120px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --section-y: clamp(3.5rem, 8vw, 6rem);
  --radius: 4px;

  /* elevation (mat board) */
  --mat-shadow: 0 1px 2px rgba(38, 34, 29, .10), 0 14px 34px -20px rgba(38, 34, 29, .45);
  --mat-shadow-lift: 0 2px 4px rgba(38, 34, 29, .12), 0 24px 48px -22px rgba(38, 34, 29, .5);
}

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: clamp(1rem, .97rem + .2vw, 1.0625rem);
  line-height: 1.65;
  color: var(--ink);
  background: var(--paper);
  /* faint paper grain */
  background-image:
    radial-gradient(rgba(38, 34, 29, .025) 1px, transparent 1px),
    radial-gradient(rgba(38, 34, 29, .02) 1px, transparent 1px);
  background-size: 7px 7px, 11px 11px;
  background-position: 0 0, 3px 5px;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -.01em;
  margin: 0 0 .5em;
  text-wrap: balance;
}

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

::selection { background: var(--pencil); color: var(--ink); }

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

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

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

.skip-link {
  position: fixed;
  top: -100%;
  left: 1rem;
  z-index: 200;
  padding: .65rem 1.1rem;
  background: var(--ink);
  color: var(--on-dark);
  border-radius: var(--radius);
  font-weight: 600;
  text-decoration: none;
  transition: top .2s ease;
}
.skip-link:focus { top: 1rem; }

.eyebrow {
  font-family: var(--font-hand);
  font-size: 1.35rem;
  line-height: 1;
  color: var(--pencil-deep);
  margin: 0 0 .35rem;
  transform: rotate(-.6deg);
  transform-origin: left;
}

.section-head { margin-bottom: clamp(1.75rem, 4vw, 2.75rem); }
.section-head--center { text-align: center; }
.section-head--center .eyebrow { transform-origin: center; }

.section-title {
  font-size: clamp(1.9rem, 1.3rem + 2.6vw, 3rem);
  margin-bottom: .35em;
}

.section-intro {
  max-width: 62ch;
  color: var(--ink-soft);
  font-size: 1.0625rem;
}
.section-head--center .section-intro { margin-inline: auto; }

.lede {
  font-size: clamp(1.1rem, 1.02rem + .4vw, 1.25rem);
  line-height: 1.6;
  color: var(--ink-soft);
}

.rule-pencil {
  border: 0;
  width: 3.25rem;
  height: 3px;
  margin: 1.1rem 0 1.5rem;
  background: var(--pencil);
  border-radius: 2px;
}
.section-head--center .rule-pencil { margin-inline: auto; }

.hand-note {
  font-family: var(--font-hand);
  font-size: 1.3rem;
  color: var(--ink-faint);
}

/* ------------------------------------------------------------ buttons -- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .8rem 1.55rem;
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  background: var(--pencil);
  color: var(--ink);
  font: 600 .95rem/1 var(--font-body);
  letter-spacing: .02em;
  text-decoration: none;
  cursor: pointer;
  transition: transform .16s ease, box-shadow .16s ease, background-color .16s ease;
  box-shadow: 3px 3px 0 var(--ink);
}
.btn:hover {
  transform: translate(-2px, -2px);
  box-shadow: 5px 5px 0 var(--ink);
  background: var(--pencil-deep);
}
.btn:active { transform: translate(1px, 1px); box-shadow: 2px 2px 0 var(--ink); }

.btn--ghost {
  background: transparent;
  box-shadow: none;
}
.btn--ghost:hover { background: var(--ink); color: var(--on-dark); box-shadow: none; }

.btn--on-dark {
  border-color: var(--on-dark);
  box-shadow: 3px 3px 0 rgba(242, 237, 226, .55);
}
.btn--on-dark:hover { box-shadow: 5px 5px 0 rgba(242, 237, 226, .55); }

.text-link {
  font-weight: 600;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--pencil);
  text-decoration-thickness: 3px;
  text-underline-offset: 3px;
  transition: text-decoration-color .15s ease;
}
.text-link:hover { text-decoration-color: var(--ink); }

/* ------------------------------------------------------------ header -- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.site-header.is-scrolled {
  border-bottom-color: var(--rule);
  box-shadow: 0 6px 20px -14px rgba(38, 34, 29, .4);
}

.header-inner {
  position: relative;   /* anchors the hamburger's drop-down panel to the header */
  display: flex;
  align-items: center;
  gap: 1.5rem;
  min-height: 4.25rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  text-decoration: none;
  margin-right: auto;
}
.brand img { width: 30px; height: 30px; }
.brand-text { display: flex; flex-direction: column; line-height: 1.05; }
.brand-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.35rem;
  letter-spacing: -.015em;
}
.brand-by {
  font-family: var(--font-body);
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-top: .15rem;
}

.nav-list {
  display: flex;
  gap: clamp(1rem, 2.5vw, 2rem);
  list-style: none;
  margin: 0; padding: 0;
}
.nav-list a {
  position: relative;
  text-decoration: none;
  font-weight: 500;
  font-size: .95rem;
  padding: .35rem 0;
}
.nav-list a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  background: var(--pencil);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .18s ease;
}
.nav-list a:hover::after,
.nav-list a[aria-current="page"]::after { transform: scaleX(1); }
.nav-list a[aria-current="page"] { font-weight: 600; }

.header-cta { padding: .55rem 1.1rem; font-size: .875rem; box-shadow: 2px 2px 0 var(--ink); }

.nav-toggle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px; height: 44px;
  padding: 10px;
  background: none;
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  height: 2.5px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform .2s ease, opacity .2s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

/* keep the "Get in touch" button only when there's room for it */
@media (max-width: 820px) {
  .header-cta { display: none; }
}

/* the hamburger's drop-down panel — same menu everywhere, built by
   main.js as a clone of the primary nav */
.menu-panel {
  position: absolute;
  top: 100%; left: 0; right: 0;
  display: none;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
  box-shadow: 0 20px 30px -22px rgba(38, 34, 29, .5);
  max-height: 70vh;
  overflow-y: auto;
}
.menu-panel.is-open { display: block; }
.menu-panel .nav-list {
  flex-direction: column;
  gap: 0;
  padding: .5rem var(--gutter) 1rem;
}
.menu-panel .nav-list a {
  display: block;
  padding: .85rem 0;
  font-size: 1.05rem;
  border-bottom: 1px dashed var(--rule);
}
.menu-panel-cta {
  margin: .35rem var(--gutter) 1.4rem;
  align-self: flex-start;
}

/* on phones the across-the-top links make way for the panel */
@media (max-width: 700px) {
  .primary-nav { display: none; }
}

/* -------------------------------------------------------------- hero -- */
.hero {
  position: relative;
  overflow: hidden;
  padding: clamp(3rem, 7vw, 5.5rem) 0 clamp(3.5rem, 8vw, 6rem);
  background:
    linear-gradient(180deg, var(--paper-deep), transparent 55%),
    var(--paper);
  border-bottom: 1px solid var(--rule);
}
.hero-inner {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.hero-title {
  font-size: clamp(2.6rem, 1.7rem + 4.6vw, 4.75rem);
  font-weight: 700;
  letter-spacing: -.02em;
  margin-bottom: .3em;
}
.hero-quote {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.15rem, 1.05rem + .5vw, 1.4rem);
  color: var(--ink-soft);
  border-left: 3px solid var(--pencil);
  padding-left: 1.1rem;
  margin: 1.5rem 0;
}
.hero-quote cite {
  display: block;
  font-family: var(--font-body);
  font-style: normal;
  font-size: .85rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-top: .4rem;
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .9rem;
  margin-top: 2rem;
}
.hero-art {
  justify-self: center;
  width: min(340px, 100%);
  transform: rotate(-2deg);
}
.hero-art .hand-note {
  display: block;
  text-align: center;
  margin-top: .9rem;
  transform: rotate(1.5deg);
}
@media (max-width: 860px) {
  .hero-inner { grid-template-columns: 1fr; }
  .hero-art { order: -1; width: min(260px, 70%); }
}

/* ------------------------------------------------------- mat framing -- */
/* A cream "mat board" that sets every drawing off, regardless of whether
   the scan itself has a border. Swap images freely — the frame is CSS.  */
.mat {
  display: block;
  background: var(--mat);
  padding: clamp(.65rem, 1.6vw, 1.15rem);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: var(--mat-shadow);
  text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease;
}
.mat img {
  width: 100%;
  background: var(--paper-deep);
  border: 1px solid rgba(38, 34, 29, .08);
}
a.mat:hover,
.artwork:hover .mat {
  transform: translateY(-5px);
  box-shadow: var(--mat-shadow-lift);
}

/* --------------------------------------------------- uniform mat height --
   The drawings are a mix of portrait and landscape (Young Stag is tall,
   Puffin is wide). Left alone, each sets its own height and the rows come
   out ragged. So every grid gives each piece the SAME frame height and
   centres the drawing inside it.

   object-fit: contain means nothing is ever cropped or stretched — the
   drawing simply sits in the middle of a standard frame, like real work
   in identical mounts. */
.art-grid .mat {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
}
.art-grid .mat img {
  width: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  aspect-ratio: auto;
}

/* ------------------------------------------------------------ sections -- */
.section { padding: var(--section-y) 0; }
.section--deep { background: var(--paper-deep); }
.section--band { background: var(--paper-band); }

.section--dark {
  background: var(--dark);
  color: var(--on-dark);
}
.section--dark .section-title { color: var(--on-dark); }
.section--dark .section-intro,
.section--dark .lede { color: rgba(242, 237, 226, .78); }
.section--dark .eyebrow { color: var(--pencil); }

/* two-column split used by About etc. */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.split--text-first .split-media { order: 2; }
@media (max-width: 860px) {
  .split { grid-template-columns: 1fr; }
  .split--text-first .split-media { order: 0; }
}

/* --------------------------------------------------------- art grid --- */
.art-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: clamp(1.25rem, 3vw, 2rem);
}
/* Shown when a filter has no artwork yet (e.g. a placeholder collection). */
.gallery-empty {
  grid-column: 1 / -1;
  margin: 0;
  padding: clamp(2rem, 6vw, 3.5rem) 1.5rem;
  text-align: center;
  color: var(--ink-soft);
  background: var(--paper-deep);
  border: 1px dashed var(--ink-faint);
  border-radius: 3px;
}
.gallery-empty strong { color: var(--ink); }
.artwork { margin: 0; }
.artwork-cap {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .75rem;
  padding: .7rem .25rem 0;
}
/* The title under each drawing. Set in the site's clean text font rather
   than the handwriting font: Caveat's baseline drifts downward as a line
   gets longer, which reads as sloping. Level and legible here; the
   hand-written notes in the margins and hero keep their character. */
.artwork-title {
  font-family: var(--font-body);
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: .01em;
  line-height: 1.3;
  color: var(--ink);
}
.artwork-cat {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-faint);
  white-space: nowrap;
}
.artwork[hidden] { display: none; }

/* featured strip on home.
   No "span 2" on the first item: mixed portrait/landscape drawings make that
   read as an accident rather than a feature. Every piece sits square in the
   same column width instead, which is what makes the group look deliberate. */

/* The home page strips get a gentle entrance: each drawing rises and fades in
   on a stagger, then lifts slightly on hover. Deliberately NO rotation — a
   gallery of wonky frames looks like a mistake, not a mood.

   Fail-safe by design: .reveal-art is fully visible on its own. Only once
   gallery.js has decided to animate an item does it add .will-reveal,
   which is the state that starts hidden. If the script never runs, the
   artwork is simply visible. */
.reveal-art { opacity: 1; transform: none; }

.reveal-art.will-reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .3, 1);
  transition-delay: calc(var(--i, 0) * 110ms);
}
.reveal-art.will-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.featured-grid .artwork:hover .mat { transform: translateY(-5px); }

/* --------------------------------------------------- hero slideshow ----
   The hero shows the most recent featured drawings, cross-fading between
   them. Reuses .mat for the frame so it is identical to every other piece.
   The first image is in the HTML, so with no JavaScript a drawing still
   shows and nothing is lost. */
.hero-slides {
  position: relative;
}
.hero-slides .slide {
  display: none;
}
.hero-slides .slide.is-active {
  display: block;
  animation: slide-in .7s ease both;
}
@keyframes slide-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
/* keeps the hand-written note aligned to the sliding frame */
.hero-slides .hand-note { display: block; }

/* progress dots */
.slide-dots {
  display: flex;
  gap: .5rem;
  justify-content: center;
  margin-top: .9rem;
}
.slide-dot {
  width: 9px;
  height: 9px;
  padding: 0;
  border: 1px solid var(--ink-faint);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  transition: background .2s ease, transform .2s ease;
}
.slide-dot[aria-current="true"] {
  background: var(--pencil);
  border-color: var(--pencil-deep);
  transform: scale(1.15);
}
.slide-dot:hover { border-color: var(--ink); }

/* ------------------------------------------------ work in progress -----
   The process section on the home page. One frame per drawing (or per stage
   of a drawing). Laid out as a row, so adding another needs no markup
   change, and a single one simply sits centred.

   Unlike the gallery, these frames are NOT square. There are only two of
   them and they are shown large, so a portrait drawing (Rogue) and a
   landscape one (Grizzly) both need room. A tall 4:5 frame suits both; the
   image is contained inside it, never cropped or stretched. */
.wip-stages {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1rem, 3vw, 2rem);
  justify-content: center;
  align-items: flex-start;
}

.wip-stage {
  flex: 1 1 260px;
  max-width: 380px;
  margin: 0;
  text-align: center;
}

.wip-stage .mat {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;        /* portrait-leaning, so a tall drawing sits
                                 comfortably and a wide one still fits */
  padding: clamp(.7rem, 1.6vw, 1.1rem);
  background: var(--mat);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: var(--mat-shadow);
}

.wip-stage .mat img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: var(--paper-deep);
}

/* The stage label: clean and level, matching the gallery captions. */
.wip-stage figcaption {
  margin-top: .6rem;
  font-family: var(--font-body);
  font-size: .95rem;
  font-weight: 600;
  color: var(--ink);
}

/* Shown when no real image has been supplied yet — a blank sheet of paper
   with a pencil note, rather than a broken image. */
.wip-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  height: 100%;
  min-height: 200px;
  background: var(--paper-deep);
  border: 1px dashed var(--rule);
  color: var(--ink-faint);
  font-family: var(--font-hand);
  font-size: 1.2rem;
  text-align: center;
  padding: 1rem;
}

.wip-note {
  margin: 1.6rem auto 0;
  max-width: 56ch;
  text-align: center;
  font-family: var(--font-hand);
  font-size: 1.25rem;
  color: var(--ink-soft, var(--ink));
}

/* Discreet mat-framed slot for the artist's self-portrait on the About page.
   Small and centred — a quiet detail beside the text, never the subject of
   the page. Shows a blank-sheet placeholder until the real drawing exists. */
.artist-portrait {
  margin: 2.2rem auto 0;
  max-width: 250px;
  text-align: center;
}
.artist-portrait .mat {
  display: block;
  aspect-ratio: 4 / 5;
  padding: clamp(.7rem, 1.6vw, 1rem);
  background: var(--mat);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: var(--mat-shadow);
}
.artist-portrait .mat img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: var(--paper-deep);
}
.artist-portrait figcaption {
  margin-top: .6rem;
  font-family: var(--font-hand);
  font-size: 1.05rem;
  color: var(--ink-soft, var(--ink));
}

@media (prefers-reduced-motion: reduce) {
  .hero-slides .slide.is-active { animation: none; }
}

@media (prefers-reduced-motion: reduce) {
  .reveal-art,
  .reveal-art.will-reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* -------------------------------------------------------- filter chips -- */
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin-bottom: clamp(1.75rem, 4vw, 2.5rem);
}
.chip {
  padding: .5rem 1.15rem;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: transparent;
  font: 600 .875rem/1 var(--font-body);
  color: var(--ink);
  cursor: pointer;
  transition: background-color .15s ease, transform .15s ease;
}
.chip:hover { background: var(--pencil-wash); transform: translateY(-2px); }
.chip[aria-pressed="true"] { background: var(--pencil); box-shadow: 2px 2px 0 var(--ink); }
.filter-count {
  font-size: .9rem;
  color: var(--ink-faint);
  margin-bottom: 1.25rem;
}

/* ------------------------------------------------------------ lightbox -- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(24, 21, 17, .96);
}
.lightbox[hidden] { display: none; }
.lightbox-stage {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: min(1100px, 100%);
  max-height: 78vh;
}
.lightbox-stage img {
  max-height: 78vh;
  width: auto;
  max-width: 100%;
  background: var(--mat);
  padding: .75rem;
  border-radius: var(--radius);
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .8);
}
.lightbox-cap {
  font-family: var(--font-hand);
  font-size: 1.4rem;
  color: var(--on-dark);
  text-align: center;
}
.lightbox-cap small {
  display: block;
  font-family: var(--font-body);
  font-size: .75rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(242, 237, 226, .55);
  margin-top: .25rem;
}
.lightbox-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 52px; height: 52px;
  display: grid;
  place-items: center;
  background: rgba(242, 237, 226, .1);
  border: 1.5px solid rgba(242, 237, 226, .5);
  border-radius: 50%;
  color: var(--on-dark);
  font-size: 1.4rem;
  cursor: pointer;
  transition: background-color .15s ease;
}
.lightbox-btn:hover { background: var(--pencil); color: var(--ink); border-color: var(--pencil); }
.lightbox-btn[hidden] { display: none; }
.lightbox-prev { left: clamp(.5rem, 2vw, 1.5rem); }
.lightbox-next { right: clamp(.5rem, 2vw, 1.5rem); }
.lightbox-close {
  position: absolute;
  top: 1rem; right: 1.25rem;
  width: 46px; height: 46px;
  background: none;
  border: 1.5px solid rgba(242, 237, 226, .5);
  border-radius: 50%;
  color: var(--on-dark);
  font-size: 1.3rem;
  cursor: pointer;
}
.lightbox-close:hover { background: var(--pencil); color: var(--ink); border-color: var(--pencil); }

/* --------------------------------------------------------------- cards -- */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: clamp(1.25rem, 3vw, 2rem);
}
.card {
  background: var(--mat);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 1.6rem;
  box-shadow: var(--mat-shadow);
  display: flex;
  flex-direction: column;
  gap: .6rem;
  transition: transform .18s ease, box-shadow .18s ease;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--mat-shadow-lift); }
.card h3 { font-size: 1.3rem; margin: 0; }
.card h3 a { text-decoration: none; }
.card h3 a:hover { text-decoration: underline; text-decoration-color: var(--pencil); text-decoration-thickness: 3px; text-underline-offset: 4px; }
.card-meta {
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.card p { color: var(--ink-soft); font-size: .97rem; }
.card .text-link { margin-top: auto; font-size: .95rem; align-self: flex-start; }

.tag-row { display: flex; flex-wrap: wrap; gap: .45rem; }
.tag {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  background: var(--pencil-wash);
  border: 1px solid rgba(194, 140, 10, .35);
  border-radius: 999px;
  padding: .25rem .7rem;
}

/* --------------------------------------------------------------- page -- */
.page-head {
  padding: clamp(2.75rem, 6vw, 4.5rem) 0 clamp(1.5rem, 3vw, 2.25rem);
  background: linear-gradient(180deg, var(--paper-deep), var(--paper));
  border-bottom: 1px solid var(--rule);
}
.page-head .section-title { font-size: clamp(2.2rem, 1.5rem + 3vw, 3.5rem); }

/* -------------------------------------------------------------- prose -- */
.prose {
  max-width: 68ch;
  margin-inline: auto;
}
.prose > * + * { margin-top: 1.1em; }
.prose h2 {
  font-size: clamp(1.5rem, 1.3rem + 1vw, 1.9rem);
  margin-top: 1.8em;
}
.prose h3 { font-size: 1.25rem; margin-top: 1.5em; }
.prose a { color: var(--ink); text-decoration-color: var(--pencil); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.prose strong { font-weight: 650; }
.prose blockquote {
  margin: 1.6em 0;
  padding: .4em 0 .4em 1.25rem;
  border-left: 3px solid var(--pencil);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.15rem;
  color: var(--ink-soft);
}
.prose ol, .prose ul { padding-left: 1.4em; }
.prose li + li { margin-top: .55em; }
.prose li::marker { color: var(--pencil-deep); font-weight: 700; }
.prose figure { margin: 1.8em 0; }
.prose figcaption {
  font-family: var(--font-hand);
  font-size: 1.2rem;
  color: var(--ink-faint);
  text-align: center;
  margin-top: .6rem;
}
.prose hr { border: 0; border-top: 1px dashed var(--rule); margin: 2.5em 0; }

.post-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem 1.25rem;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 1.5rem;
}

.post-nav {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 3rem;
  padding-top: 1.75rem;
  border-top: 1px dashed var(--rule);
  font-weight: 600;
}
.post-nav a { text-decoration: none; }
.post-nav a:hover { text-decoration: underline; text-decoration-color: var(--pencil); text-underline-offset: 4px; }
.post-nav .hand-note { display: block; font-weight: 400; }

/* --------------------------------------------------------------- form -- */
.contact-grid {
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
@media (max-width: 800px) { .contact-grid { grid-template-columns: 1fr; } }

.form-field { margin-bottom: 1.35rem; }
.form-field label {
  display: block;
  font-weight: 600;
  font-size: .9rem;
  margin-bottom: .45rem;
}
.form-field .hint { font-weight: 400; color: var(--ink-faint); }
.form-field input,
.form-field textarea {
  width: 100%;
  padding: .8rem 1rem;
  background: var(--mat);
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  font: inherit;
  color: var(--ink);
  transition: box-shadow .15s ease, border-color .15s ease;
}
.form-field input:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--pencil-deep);
  box-shadow: 3px 3px 0 var(--pencil);
}
.form-field textarea { min-height: 160px; resize: vertical; }

.form-note {
  background: var(--pencil-wash);
  border: 1px solid rgba(194, 140, 10, .4);
  border-radius: var(--radius);
  padding: 1rem 1.2rem;
  font-size: .92rem;
  color: var(--ink-soft);
  margin-bottom: 1.5rem;
}

/* -------------------------------------------------------------- footer -- */
.site-footer {
  background: var(--dark);
  color: rgba(242, 237, 226, .8);
  padding: clamp(2.75rem, 6vw, 4rem) 0 2rem;
  font-size: .95rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: clamp(1.75rem, 4vw, 3rem);
  margin-bottom: 2.5rem;
}
@media (max-width: 760px) { .footer-grid { grid-template-columns: 1fr; } }

.site-footer .brand-name { color: var(--on-dark); }
.site-footer .brand-by { color: rgba(255,255,255,.62); }
.site-footer h4 {
  font-family: var(--font-body);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--pencil);
  margin-bottom: 1rem;
}
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li + li { margin-top: .55rem; }
.site-footer a { text-decoration: none; }
.site-footer a:hover { color: var(--on-dark); text-decoration: underline; text-decoration-color: var(--pencil); text-underline-offset: 3px; }

.copyright-fine {
  border-top: 1px solid rgba(242, 237, 226, .18);
  padding-top: 1.5rem;
  font-size: .85rem;
  color: rgba(242, 237, 226, .55);
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 2rem;
  justify-content: space-between;
}

/* --------------------------------------------------------------- 404 --- */
.notfound {
  min-height: 55vh;
  display: grid;
  place-content: center;
  text-align: center;
  padding: 4rem var(--gutter);
  gap: 1rem;
}
.notfound .hero-title { font-size: clamp(3rem, 2rem + 6vw, 6rem); }

/* ------------------------------------------------------------- reveal --
   Visible by default; .will-reveal (added by main.js only when it is about
   to animate the element) is what starts it hidden. This keeps the page
   readable even if the script never runs. */
.js [data-reveal].will-reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .6s ease, transform .6s ease;
  transition-delay: calc(var(--i, 0) * 90ms);
}
.js [data-reveal].is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js [data-reveal],
  .js [data-reveal].will-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}