/* investe — investe.com.au
   ---------------------------------------------------------------
   Brand tokens from the Claude Design kit
   (Brand/Final - Claude Design (Oct 2026)/kit/tokens.css).
   Dark-mode values are derived from it and contrast-checked (AA+).
   Visual language: an architectural survey sheet. Square corners,
   hairline rules, drafting grid, title block.
   --------------------------------------------------------------- */

@font-face { font-family: "Libre Caslon Display"; src: url("/assets/fonts/libre-caslon-display.woff") format("woff"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Libre Caslon Text"; src: url("/assets/fonts/libre-caslon-text-var.woff") format("woff"); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Libre Caslon Text"; src: url("/assets/fonts/libre-caslon-text-italic-var.woff") format("woff"); font-weight: 400 700; font-style: italic; font-display: swap; }
@font-face { font-family: "Hanken Grotesk"; src: url("/assets/fonts/hanken-grotesk-var.woff") format("woff"); font-weight: 100 900; font-display: swap; }

:root {
  color-scheme: light dark;
  --green: #0F4D36;      /* Bottle green — brand */
  --sage: #9FC2B0;       /* accents on green only */
  --bone: #F1ECE3;
  --paper: #F1ECE3;      /* page */
  --ink: #2A2B2E;        /* body text (12:1) */
  --muted: #5E6862;      /* secondary text (4.9:1) */
  --rule: rgba(42, 43, 46, .16);   /* hairlines */
  --accent: #0F4D36;     /* brand colour as ink */
  --line-art: #0F4D36;   /* survey linework */

  --display: "Libre Caslon Display", "Libre Caslon Text", Georgia, serif;
  --serif: "Libre Caslon Text", Georgia, serif;
  --sans: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;

  --gutter: clamp(1.25rem, 3.6vw, 3.5rem);
  --spring: cubic-bezier(.34, 1.35, .5, 1);
  --ease: cubic-bezier(.65, 0, .35, 1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #0E1A15;
    --ink: #F1ECE3;     /* 15.2:1 */
    --muted: #A9B3AD;   /* 8.3:1 */
    --rule: rgba(241, 236, 227, .14);
    --accent: #9FC2B0;  /* 9.2:1 */
    --line-art: #9FC2B0;
  }
}

/* ---- Base ------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: clamp(1rem, .96rem + .2vw, 1.125rem);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3 { margin: 0; font-weight: 400; }
p, dl, dd { margin: 0; }
em { font-family: var(--serif); font-style: italic; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
::selection { background: var(--green); color: var(--bone); }

.skip { position: absolute; left: 1rem; top: -4rem; z-index: 50; background: var(--green); color: var(--bone); padding: .6rem 1rem; text-decoration: none; }
.skip:focus { top: 1rem; }

.label {
  display: flex; align-items: center; gap: .75rem;
  font-size: .74rem; font-weight: 500; letter-spacing: .18em; text-transform: uppercase;
  color: var(--muted);
}
.label::before { content: ""; width: 1.75rem; height: 1px; background: currentColor; opacity: .6; }
.label-light { color: var(--sage); }

/* text link with sliding arrow */
.link {
  display: inline-flex; align-items: center; gap: .6rem;
  padding-bottom: .35rem; text-decoration: none;
  font-weight: 500; letter-spacing: .01em;
  background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat;
  transition: background-size .5s var(--ease);
}
.link svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: square; transition: transform .55s var(--spring); }
.link:hover { background-size: 0 1px; background-position: 100% 100%; }
.link:hover svg { transform: translate(2px, 2px); }
.signoff .link:hover svg { transform: translate(3px, -3px); }

/* ---- Top bar ---------------------------------------------------- */
.bar {
  position: fixed; inset: 0 0 auto 0; z-index: 20;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: 1.1rem var(--gutter);
  border-bottom: 1px solid transparent;
  font-size: .74rem; letter-spacing: .18em; text-transform: uppercase; color: var(--muted);
  transition: background-color .4s ease, border-color .4s ease, padding .4s var(--ease);
}
.bar.is-scrolled { background: color-mix(in srgb, var(--paper) 88%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-color: var(--rule); padding-block: .7rem; }
.bar-mid { justify-self: center; }
.bar-end { justify-self: end; }
.brand { position: relative; display: block; height: 2.4rem; width: 7.4rem; color: var(--accent); }
.brand svg { position: absolute; left: 0; top: 50%; fill: currentColor; transition: opacity .45s var(--ease), transform .6s var(--spring); }
.brand-word { width: 7.4rem; height: auto; transform: translateY(-50%); }
.brand-glyph { width: 2.2rem; height: 2.2rem; padding: .5rem; background: var(--green); fill: var(--bone) !important; opacity: 0; transform: translateY(-50%) rotate(-90deg) scale(.5); }
.bar.is-scrolled .brand-word { opacity: 0; transform: translateY(-50%) translateX(-.6rem); }
.bar.is-scrolled .brand-glyph { opacity: 1; transform: translateY(-50%) rotate(0) scale(1); }

/* ---- Hero: survey sheet ---------------------------------------- */
.sheet {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: max(40rem, 100svh);
  display: grid; grid-template-rows: 1fr auto;
  padding-top: 5.5rem;
}
.sheet-art { position: absolute; inset: -2%; z-index: -2; transition: transform 1.2s cubic-bezier(.2, .7, .2, 1); }
.hero-art { width: 100%; height: 100%; display: block; animation: drift 52s ease-in-out infinite alternate; transform-origin: 70% 40%; }
@keyframes drift { from { transform: scale(1) translate3d(0, 0, 0); } to { transform: scale(1.06) translate3d(-1%, .6%, 0); } }
.topo-minor { fill: none; stroke: var(--line-art); stroke-opacity: .12; stroke-width: 1; vector-effect: non-scaling-stroke; }
.topo-major { fill: none; stroke: var(--line-art); stroke-opacity: .26; stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.cad-road { fill: none; stroke: var(--line-art); stroke-opacity: .045; stroke-width: 18; stroke-linecap: square; }
.cad-line { fill: none; stroke: var(--line-art); stroke-opacity: .45; stroke-width: 1; vector-effect: non-scaling-stroke; stroke-dasharray: 1400; stroke-dashoffset: 1400; animation: draw 2.6s .6s var(--ease) forwards; }
.cad-lot { fill: var(--line-art); fill-opacity: 0; stroke: var(--line-art); stroke-width: 1.6; vector-effect: non-scaling-stroke; stroke-dasharray: 900; stroke-dashoffset: 900; animation: draw 1.8s 1.8s var(--ease) forwards, lotfill 1.2s 3s ease forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes lotfill { to { fill-opacity: .08; } }

/* drafting grid + registration marks */
.sheet-grid { position: absolute; inset: 0; z-index: -1; display: grid; grid-template-columns: repeat(6, 1fr); padding-inline: var(--gutter); pointer-events: none; }
.sheet-grid span { border-left: 1px solid var(--rule); opacity: .55; }
.sheet-grid span:last-child { border-right: 1px solid var(--rule); }
.reg { position: absolute; top: 5.2rem; width: 1.1rem; height: 1.1rem; z-index: -1; }
.reg::before, .reg::after { content: ""; position: absolute; background: var(--accent); opacity: .55; }
.reg::before { left: 50%; top: 0; bottom: 0; width: 1px; }
.reg::after { top: 50%; left: 0; right: 0; height: 1px; }
.reg-tl { left: calc(var(--gutter) - .55rem); }
.reg-tr { right: calc(var(--gutter) - .55rem); }

.sheet-body {
  align-self: end;
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 1.25rem; align-items: end;
  padding: 0 var(--gutter) clamp(2.5rem, 6vw, 4.5rem);
}
h1 {
  grid-column: 1 / span 9;
  font-family: var(--display);
  font-size: clamp(3.1rem, 1.2rem + 7.2vw, 8.4rem);
  line-height: .94; letter-spacing: -.02em;
  color: var(--ink);
}
.h1-line { display: block; opacity: 0; transform: translateY(.35em); animation: rise 1.1s var(--ease) forwards; }
.h1-line:nth-child(2) { animation-delay: .18s; }
.h1-indent { padding-left: 1.1em; }
h1 em { font-size: .9em; letter-spacing: -.015em; color: var(--accent); }
.sheet-aside { grid-column: 10 / span 3; padding-bottom: .6rem; opacity: 0; animation: rise 1s .55s var(--ease) forwards; }
.lede { color: var(--muted); font-size: clamp(.98rem, .94rem + .2vw, 1.08rem); }
.sheet-aside .link { margin-top: 1.4rem; color: var(--accent); }
@keyframes rise { to { opacity: 1; transform: none; } }

/* italic reveal: letters cross-fade from upright to italic */
.ri { position: relative; display: inline-block; }
.ri.is-armed { color: transparent; }
.ri-track { position: absolute; inset: 0; display: flex; white-space: nowrap; pointer-events: none; }
.ri-cell { position: relative; flex: 0 0 auto; }
.ri-cell span { position: absolute; inset: 0; text-align: center; white-space: pre; color: var(--accent); transition: opacity .38s var(--ease); }
.ri-up { font-family: var(--display); font-style: normal; }
.ri-it { opacity: 0; }
.ri-cell.is-on .ri-up { opacity: 0; }
.ri-cell.is-on .ri-it { opacity: 1; }

/* stamp pressed onto the sheet */
.stamp {
  position: absolute; right: calc(var(--gutter) + 4%); top: 22%;
  width: clamp(7.5rem, 11vw, 10.5rem); aspect-ratio: 1;
  display: grid; place-items: center;
  border-radius: 50%; background: var(--green); color: var(--bone);
  box-shadow: 0 0 0 .4rem var(--paper), 0 0 0 calc(.4rem + 1px) var(--rule);
  opacity: 0; transform: scale(1.25) rotate(-14deg);
  animation: press .9s 1.1s var(--spring) forwards;
  transition: transform .6s var(--spring);
}
@keyframes press { to { opacity: 1; transform: scale(1) rotate(-8deg); } }
.stamp:hover { transform: scale(1.04) rotate(4deg); }
.stamp-ring { position: absolute; inset: 0; width: 100%; height: 100%; animation: spin 40s linear infinite; }
.stamp-ring text { fill: var(--sage); font: 500 12.5px/1 var(--sans); }
.stamp-glyph { width: 30%; fill: var(--bone); }
@keyframes spin { to { transform: rotate(360deg); } }

/* title block along the bottom of the sheet */
.title-block {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0 var(--gutter); border-top: 1px solid var(--rule);
}
.title-block > div { padding: .9rem 1rem 1.1rem 0; border-right: 1px solid var(--rule); }
.title-block > div + div { padding-left: 1rem; }
.title-block > div:last-child { border-right: 0; }
.title-block dt { font-size: .66rem; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.title-block dd { margin-top: .25rem; font-family: var(--serif); font-size: .98rem; font-variant-numeric: tabular-nums; }
.tb-scroll dd { display: flex; align-items: center; gap: .75rem; }
.tick { position: relative; width: 2.5rem; height: 1px; background: var(--rule); overflow: hidden; }
.tick::after { content: ""; position: absolute; inset: 0; background: var(--accent); transform: translateX(-100%); animation: tick 2.4s var(--ease) infinite; }
@keyframes tick { 50% { transform: none; } 100% { transform: translateX(100%); } }

/* ---- Philosophy band ------------------------------------------- */
.band {
  background: var(--green); color: var(--bone);
  padding: clamp(5rem, 13vw, 10rem) var(--gutter);
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 1.25rem; row-gap: 2rem;
}
.band .label { grid-column: 1 / span 3; align-self: start; padding-top: .9rem; }
.band-text {
  grid-column: 4 / span 9;
  font-family: var(--display);
  font-size: clamp(2rem, 1rem + 3.8vw, 4.6rem);
  line-height: 1.1; letter-spacing: -.012em;
}
.w { transition: opacity .25s linear; }
[data-wordfill].is-armed .w { opacity: .2; }
[data-wordfill].is-armed .w.is-on { opacity: 1; }
.is-highlight { position: relative; display: inline-block; font-family: var(--serif); font-style: italic; color: var(--green); background: var(--bone); padding: 0 .16em .04em; }
.lamp { position: absolute; inset: 0; padding: inherit; color: var(--green); background: var(--sage); pointer-events: none; opacity: 0; transition: opacity .2s ease;
  -webkit-mask-image: radial-gradient(circle 3rem at var(--lx, 50%) var(--ly, 50%), #000 35%, transparent 72%);
          mask-image: radial-gradient(circle 3rem at var(--lx, 50%) var(--ly, 50%), #000 35%, transparent 72%); }
.is-highlight.is-lit .lamp { opacity: 1; }

/* ---- Approach: editorial index --------------------------------- */
.index {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 1.25rem;
  padding: clamp(5rem, 11vw, 9rem) var(--gutter);
}
.index-head { grid-column: 1 / span 4; }
.index-pin { position: sticky; top: 6.5rem; }
h2 { margin-top: 1.25rem; font-family: var(--display); font-size: clamp(2.2rem, 1.3rem + 2.8vw, 3.8rem); line-height: 1.02; letter-spacing: -.015em; }
h2 em { color: var(--accent); }
.rows { grid-column: 6 / span 7; list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.row {
  position: relative; isolation: isolate;
  display: grid; grid-template-columns: 5.5rem 1fr; column-gap: 1.5rem; row-gap: .5rem;
  padding: 2.2rem 0 2.4rem;
  border-bottom: 1px solid var(--rule);
}
.row::before { content: ""; position: absolute; inset: 0 -1.25rem; z-index: -1; opacity: 0; transition: opacity .35s ease;
  background: radial-gradient(18rem circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--accent) 12%, transparent), transparent 65%); }
.row:hover::before { opacity: 1; }
.row-no {
  grid-row: span 2;
  font-family: var(--display); font-size: clamp(2.6rem, 1.8rem + 2vw, 3.8rem); line-height: .9;
  color: var(--accent); font-variant-numeric: lining-nums;
  transition: transform .6s var(--spring);
}
.row:hover .row-no { transform: translateX(.35rem); font-family: var(--serif); font-style: italic; }
.row h3 { font-family: var(--display); font-size: clamp(1.6rem, 1.2rem + 1vw, 2.15rem); line-height: 1.1; }
.row p { color: var(--muted); max-width: 32rem; }

/* ---- Focus marquee (outlined) ---------------------------------- */
.focus { border-block: 1px solid var(--rule); overflow: hidden; }
.marquee { display: flex; padding-block: clamp(1.4rem, 3vw, 2.2rem); }
.marquee-track { display: flex; flex: 0 0 auto; animation: marquee 42s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-row { display: flex; align-items: center; gap: clamp(1.25rem, 2.6vw, 2.5rem); margin: 0; padding: 0 clamp(.6rem, 1.3vw, 1.25rem); list-style: none; flex: 0 0 auto; }
.marquee-row li { font-family: var(--display); font-size: clamp(2.6rem, 1.4rem + 4.4vw, 5.8rem); line-height: 1.05; white-space: nowrap; color: transparent; -webkit-text-stroke: 1px var(--accent); transition: color .4s ease; }
.marquee-row li em { color: var(--accent); -webkit-text-stroke: 0; }
.marquee-row li:hover { color: var(--accent); }
.marquee-row .sep { font-family: var(--serif); color: var(--muted); -webkit-text-stroke: 0; opacity: .5; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---- Sign-off with oversized wordmark -------------------------- */
.signoff { padding: clamp(5rem, 11vw, 9rem) var(--gutter) 0; overflow: hidden; }
.signoff-top { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1.5rem 3rem; padding-bottom: clamp(2.5rem, 6vw, 4.5rem); }
.signoff h2 { margin: 0; font-size: clamp(2.4rem, 1.3rem + 4vw, 5rem); }
.signoff .link { color: var(--accent); font-size: clamp(1rem, .9rem + .5vw, 1.3rem); }
.giant { display: block; width: 100%; height: auto; fill: var(--accent); margin-bottom: -.4%; }
.js .giant { clip-path: inset(100% 0 0 0); transform: translateY(8%); transition: clip-path 1.4s var(--ease), transform 1.4s var(--ease); }
.js .giant.is-in { clip-path: inset(0 0 0 0); transform: none; }

/* ---- Footer ---------------------------------------------------- */
.foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 2rem; margin: 0 var(--gutter); padding: 1.4rem 0 2rem; border-top: 1px solid var(--rule); color: var(--muted); font-size: .8rem; }
.fine { font-size: .74rem; }

/* ---- Scroll reveal --------------------------------------------- */
.js .reveal { opacity: 0; transform: translateY(24px); transition: opacity .9s var(--ease), transform 1s var(--spring); transition-delay: calc(var(--i, 0) * 90ms); }
.js .reveal.is-in { opacity: 1; transform: none; }

/* ---- Responsive ------------------------------------------------ */
@media (max-width: 60rem) {
  .bar-mid { display: none; }
  .bar { grid-template-columns: 1fr auto; }
  h1 { grid-column: 1 / -1; }
  .sheet-aside { grid-column: 1 / span 9; margin-top: 2rem; }
  .stamp { top: 16%; right: var(--gutter); }
  .title-block { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .title-block > div:nth-child(2) { border-right: 0; }
  .title-block > div:nth-child(3) { padding-left: 0; }
  .title-block > div:nth-child(n+3) { border-top: 1px solid var(--rule); }
  .band .label, .band-text { grid-column: 1 / -1; }
  .index-head, .rows { grid-column: 1 / -1; }
  .index-pin { position: static; margin-bottom: 2.5rem; }
  .sheet-grid { grid-template-columns: repeat(3, 1fr); }
  .sheet-grid span:nth-child(n+4) { display: none; }
}
@media (max-width: 36rem) {
  .sheet-aside { grid-column: 1 / -1; }
  .title-block dd { font-size: .86rem; white-space: nowrap; }
  .h1-indent { padding-left: .5em; }
  .row { grid-template-columns: 3.4rem 1fr; column-gap: 1rem; }
  .stamp { width: 6.25rem; top: 12%; }
}

/* ---- Reduced motion -------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .marquee-track, .tick::after { animation: none !important; }
  .js .reveal, .js .giant { opacity: 1; transform: none; clip-path: none; }
}

@media print {
  .bar, .stamp, .focus, .sheet-art { display: none; }
  body { background: #fff; color: #000; }
}