@font-face {
  font-family: 'Literata';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/literata-400-italic.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Literata';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/literata-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Literata';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/literata-600.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/work-sans-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/work-sans-500.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* nikibonfield.com.au — the author site.

   Position: this one is DUSK. Her counselling site took daylight (sage, teal,
   honey). The studio took gallery plaster. Every painting she makes is a small
   warm figure standing under something vast and dark, so the two existing sites
   took the light around the work and this one takes the ground the figure
   stands in. It is also the only light-value territory the siblings have not
   claimed, so it reads as hers at a glance without repeating either.

   Ember replaces the golden thread. Gold is banned across this workspace, but
   the thread is the single most ownable device she has, so it survives in burnt
   ember instead. Ember is the thread, links and buttons. It is never a
   decorative rule and never a heading colour on its own. */

:root {
  --dusk:      #242b34;   /* primary ground. blue-slate, NOT the studio's warm ink */
  --dusk-deep: #161b22;   /* footer, excerpt band */
  --bone:      #ece8e0;   /* text on dusk; ground of the light sections */
  --bone-2:    #e2ddd3;   /* mounts and insets on light ground */
  --ember:     #c05b3c;   /* the thread. links, CTAs. one accent, nothing else */
  --ember-lift:#d46d4c;   /* hover only */
  --mist:      #97a1ae;   /* captions and secondary text on dusk */
  --ink-soft:  #4a5058;   /* secondary text on bone */

  --book: 'Literata', Georgia, 'Times New Roman', serif;
  --ui: 'Work Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

  --wrap: 1180px;
  --gut: 24px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--dusk);
  color: var(--bone);
  font-family: var(--book);
  font-size: 19px;
  line-height: 1.7;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding-left: var(--gut); padding-right: var(--gut); }
.narrow { max-width: 64ch; }

/* light sections invert the whole palette rather than patching colours */
.on-bone { background: var(--bone); color: var(--dusk); }
.on-bone .sub, .on-bone .cap { color: var(--ink-soft); }
.on-deep { background: var(--dusk-deep); }

h1, h2, h3 { font-weight: 600; margin: 0; line-height: 1.1; letter-spacing: -0.015em; }
h1 { font-size: clamp(2.6rem, 6vw, 4.6rem); }
h2 { font-size: clamp(1.9rem, 3.6vw, 2.9rem); }
h3 { font-size: 1.45rem; }
p { margin: 0 0 1.1em; }
.sub { color: var(--mist); }
.lede { font-size: clamp(1.15rem, 1.8vw, 1.42rem); line-height: 1.55; }

.ui, .nav a, .btn, .cap { font-family: var(--ui); }
.cap { font-size: 12.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mist); }

/* ---------- links: ember is interaction, never decoration ---------- */
.ln { text-decoration: none; border-bottom: 1px solid rgba(192,91,60,0.45); transition: border-color .25s, color .25s; }
.ln:hover { color: var(--ember-lift); border-bottom-color: var(--ember-lift); }

.btn {
  font-family: var(--ui); font-size: 14px; letter-spacing: 0.04em;
  display: inline-block; text-decoration: none;
  background: var(--ember); color: #fff;
  padding: 15px 28px; border: 1px solid var(--ember);
  transition: background .25s, color .25s, border-color .25s;
}
.btn:hover { background: transparent; color: var(--ember-lift); border-color: var(--ember-lift); }
.btn.quiet { background: transparent; color: inherit; border-color: currentColor; opacity: .85; }
.btn.quiet:hover { opacity: 1; border-color: var(--ember-lift); color: var(--ember-lift); }

/* ---------- header ---------- */
header { padding: 26px 0; }
.head-in { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { font-family: var(--book); font-weight: 600; font-size: 1.2rem; text-decoration: none; letter-spacing: -0.01em; }
.nav { display: flex; gap: 28px; }
.nav a { font-size: 14px; text-decoration: none; color: var(--mist); padding: 4px 0; border-bottom: 1px solid transparent; transition: color .25s, border-color .25s; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--bone); border-bottom-color: var(--ember); }
.menu-btn { display: none; background: none; border: 1px solid rgba(236,232,224,.28); color: var(--bone); font-family: var(--ui); font-size: 13px; padding: 10px 15px; cursor: pointer; }
.drawer { display: none; }
@media (max-width: 860px) {
  .nav { display: none; }
  .menu-btn { display: block; }
  .drawer.open { display: block; padding-top: 16px; padding-bottom: 8px; }
  .drawer.open .nav { display: flex; flex-direction: column; gap: 0; }
  .drawer.open .nav a { padding: 15px 0; border-bottom: 1px solid rgba(236,232,224,.14); min-height: 48px; }
}

/* ---------- hero: name, one line, the books ----------
   Brand, person and product all in the fold. The client rejected a hero that
   was "just a painting" with no brand presence, so her NAME is the wordmark and
   the two covers do the selling. */
.hero { padding: 34px 0 90px; position: relative; }
.hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 70px; align-items: center; }
.hero h1 { max-width: 11ch; }
.hero .lede { margin-top: 26px; max-width: 32ch; color: var(--bone); }
.hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 34px; }
/* three strands as a SENTENCE, never a row of bullet-separated chips */
.strands { margin-top: 40px; max-width: 46ch; font-size: 16.5px; color: var(--mist); line-height: 1.7; }

/* Equal HEIGHTS, natural widths. The two covers are different proportions, so
   matching their widths made one look shrunken next to the other. Books stand
   on a shelf at the same height, not the same width. Never cropped. */
.covers { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; align-items: end; justify-items: center; }
.cover { margin: 0; display: flex; flex-direction: column; align-items: flex-start; }
.cover img {
  height: clamp(240px, 30vw, 360px); width: auto; max-width: 100%; object-fit: contain;
  box-shadow: 0 24px 50px rgba(0,0,0,.45), 0 3px 10px rgba(0,0,0,.3);
  transition: box-shadow .5s ease, transform .5s ease;
}
.cover:nth-child(1) { transform: translateY(26px); }
.cover figcaption { margin-top: 14px; font-size: 13px; }
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; gap: 48px; }
  .hero h1 { max-width: none; }
  .covers { max-width: 420px; }
}

/* ---------- the thread ----------
   Her paintings are a small figure holding a thread up to something enormous.
   Here the thread is structural: it draws itself down the page as you scroll
   and physically links the sections. This is the one signature motion. */
/* Spans the whole fold, edge to edge. Stopping short made it read as a stray
   mark; full height it reads as a deliberate hand-drawn rule between her name
   and her books, which is what the thread is: the line connecting the two. */
.thread { position: absolute; left: 47%; top: 0; width: 2px; height: 100%; pointer-events: none; overflow: visible; z-index: 0; }
.thread svg { height: 100%; width: 40px; margin-left: -19px; overflow: visible; }
.thread path { fill: none; stroke: var(--ember); stroke-width: 1.5; opacity: .42; }
@media (max-width: 900px) { .thread { display: none; } }

/* ---------- books ---------- */
.book-row { display: grid; grid-template-columns: 0.8fr 1fr; gap: 66px; align-items: center; padding: 84px 0; }
.book-row.flip .book-art { order: 2; }
.book-art { margin: 0; }
.book-art img { width: 100%; box-shadow: 0 22px 44px rgba(36,43,52,.22); }
.book-row h2 { max-width: 16ch; }
.book-sub { font-style: italic; margin-top: 12px; font-size: 1.1rem; }
.book-open { font-size: 1.25rem; margin-top: 24px; }
.book-body { margin-top: 18px; }
.book-ctas { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin-top: 26px; }
@media (max-width: 860px) {
  .book-row { grid-template-columns: 1fr; gap: 34px; padding: 56px 0; }
  .book-row.flip .book-art { order: 0; }
  .book-art { max-width: 300px; }
}

/* ---------- excerpt band: words only, no image ---------- */
.passage { padding: 96px 0; }
.passage blockquote {
  margin: 0; font-size: clamp(1.5rem, 3vw, 2.3rem); line-height: 1.4;
  max-width: 22ch;
}
.passage .attrib { margin-top: 28px; }

/* ---------- her, offset ---------- */
.who { padding: 96px 0; }
.who-grid { display: grid; grid-template-columns: 0.72fr 1fr; gap: 64px; align-items: center; }
/* a photograph of a person may be cropped; a painting may not */
.who-photo { margin: 0; }
.who-photo img { width: 100%; aspect-ratio: 4/5; object-fit: cover; object-position: center 22%; }
@media (max-width: 860px) { .who-grid { grid-template-columns: 1fr; gap: 32px; } .who-photo { max-width: 340px; } }

/* ---------- doorways: deliberately unequal ----------
   Three equal columns would be a nav menu wearing a section costume. The widths
   encode a real judgement: a reader who loved the memoirs is likelier to want
   the counselling room than a $500 canvas. */
.doorways { display: grid; grid-template-columns: 1.62fr 1fr; gap: 34px; padding-bottom: 96px; }
.door { display: block; text-decoration: none; }
.door-media { overflow: hidden; background: var(--dusk-deep); }
.door.room .door-media img { width: 100%; aspect-ratio: 16/10; object-fit: cover; }
/* the painting is NEVER cropped: the space above the figure is the whole point */
.door.art .door-media { aspect-ratio: 16/10; display: grid; place-items: center; }
.door.art .door-media img { width: 100%; height: 100%; object-fit: cover; object-position: center 42%; }
.door h3 { margin-top: 20px; }
.door p { margin-top: 10px; color: var(--mist); }
.door .go { font-family: var(--ui); font-size: 13.5px; color: var(--ember); margin-top: 14px; display: inline-block; }
@media (max-width: 860px) { .doorways { grid-template-columns: 1fr; } }

/* ---------- closing band ---------- */
.closing { padding: 74px 0; }
.closing-in { display: flex; align-items: baseline; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.closing p { margin: 0; max-width: 34ch; font-size: 1.25rem; }
.closing-links { display: flex; gap: 26px; flex-wrap: wrap; font-family: var(--ui); font-size: 14px; }

/* ---------- prose pages ---------- */
.page-head { padding-top: 58px; padding-bottom: 10px; }
.prose { padding-top: 34px; padding-bottom: 92px; }
.prose h2 { margin-top: 52px; }
.prose p { color: var(--bone); }
.on-bone .prose p { color: var(--dusk); }

/* ---------- footer ---------- */
footer { padding: 66px 0 78px; border-top: 1px solid rgba(236,232,224,.13); }
.foot { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px; }
@media (max-width: 760px) { .foot { grid-template-columns: 1fr; gap: 26px; } }
footer a { color: var(--mist); text-decoration: none; display: block; padding: 5px 0; }
footer a:hover { color: var(--bone); }
.acknowledgement { margin-top: 52px; font-size: 14.5px; color: var(--mist); max-width: 78ch; line-height: 1.75; }
.foot-note { margin-top: 26px; font-family: var(--ui); font-size: 12px; color: var(--mist); opacity: .8; }

/* ---------- motion ----------
   Opacity only. No translate anywhere, so the fade-up-8px tell never appears.
   The thread drawing itself is the one real movement on the site. */
.reveal { opacity: 0; transition: opacity .9s cubic-bezier(.22,1,.36,1) var(--d, 0ms); }
.reveal.in { opacity: 1; }
.thread path { stroke-dasharray: var(--len, 2000); stroke-dashoffset: var(--off, 2000); }

html[data-motion="off"] .reveal { opacity: 1 !important; transition: none !important; }
html[data-motion="off"] .thread path { stroke-dashoffset: 0 !important; }
html[data-motion="off"] * { transition: none !important; animation: none !important; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transition: none; }
  .thread path { stroke-dashoffset: 0; }
}

::selection { background: var(--ember); color: #fff; }
:focus-visible { outline: 2px solid var(--ember); outline-offset: 3px; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 16px; background: var(--ember); color: #fff; padding: 12px 16px; z-index: 10; }