/* ════════════════════════════════════════════════════════════════════════
   SITE VERSION. index.html carries html.v-alt.v-orange.v-decoration.v-blue —
   Orange's build, Decoration's landing (no About section), recoloured
   #0066FF. Each class layers on the one before:
   • .v-alt        — near-black company/project links
   • .v-orange     — a whole-site palette (warm near-black ink, neutral grid)
   • .v-decoration — the landing: drop-cap O, labels and About blurb
   • .v-blue       — the Orange build recoloured blue
   The other versions (Colour, Olive, Blue02) and the About section were
   removed; git history has them. Figma: Portfolio Refresh 2.0.
   ════════════════════════════════════════════════════════════════════════ */

/* ── Decoration ────────────────────────────────────────────────────────── */
/* Figma: Website 4409:81244. The Orange build with its landing restyled:
   neutral black type, "Timothy Kennedy" top-left and the role bottom-left,
   an ornamental drop-cap O for the globe, and the About copy set small in
   the bottom-right corner (no Scroll cue). The rest of the site is Orange. */
.home-meta__name,
.home-blurb,
.hero__deco-o { display: none; }

/* The corner-label box spans the margins top to bottom: name and year
   along its top, the role on its bottom edge. */
.v-decoration .home-meta { bottom: var(--edge); }
.v-decoration .home-meta__name { display: block; font-size: 18px; line-height: 1.3; }
.v-decoration .home-meta__role { position: absolute; left: 0; bottom: 0; }
/* The O takes the globe's place, in the same box with the same spacing as
   Orange's globe (so the word sits exactly as it does there). */
.v-decoration .hero__deco-o {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: calc(var(--globe-size) * 0.06);   /* square corners clear the m and the t */
  object-fit: contain;
}
/* Decoration only (not Colour): the O sits in the exact centre of the page
   and the word fits around it — "Tim" and "thy" each take half the space
   either side, Tim set against the O's left, thy from its right (the gaps
   as before: Orange's, with the O 4px nearer the m), and the box drops the
   globe's 2px lift so it's centred vertically too. Then the lot is 1.0187
   of Orange's size, around the page centre, and lifted 60px. */
html.v-decoration:not(.v-colour) #home-hero > .hero__text { flex: 1 1 0; }
/* The letters sized so the O spans them exactly: from the top of the h
   (the tallest letter, 0.75em) to the foot of the y (0.203em below the
   baseline) is 0.953em of this font, and the O's artwork is 10.648vw tall
   (the 11vw globe box × 1.1, less its 6% padding each side), so the type
   is 10.648 / 0.953 = 11.17vw — 11.42vw as rendered (the glyphs draw ~2%
   inside their metrics). Set on Tim and thy alone, so the O keeps
   its size. Then a 0.021em nudge down centres that ink span on the O (the
   line box centres on it, the ink sits slightly high in the line box). */
html.v-decoration:not(.v-colour) #home-hero > .hero__text {
  --hero-font: 11.42vw;
  position: relative;
  top: 0.021em;
}
html.v-decoration:not(.v-colour) #hero-tim { justify-content: flex-end; }
/* The T tucked in closer to the i (0.04em tighter than the font's own
   kerning); Tim is set against the O, so the T is what moves. */
html.v-decoration:not(.v-colour) .hero__T { margin-right: -0.096em; }
/* "thy" tracked the same as "Tim" (-0.02em, the .hero__text default). */
html.v-decoration:not(.v-colour) #hero-thy {
  position: relative;              /* 4px further from the O on screen (the hero */
  left: calc(4px / 1.0187);          /* is drawn at 1.0187); moves it without reflowing */
}
html.v-decoration:not(.v-colour) .hero__globe-wrap {
  flex-basis: calc(var(--globe-size) * 1.1);   /* the O 10% bigger than the globe's box; */
  height: calc(var(--globe-size) * 1.1);       /* Tim and thy move out with its sides */
  /* (less the padding's 10% growth, so the gaps to the m and t stay put) */
  margin-left: calc(var(--hero-font) * -0.02 - var(--globe-size) * 0.006);
  margin-right: calc(var(--hero-font) * -0.02 - var(--globe-size) * 0.006);
  top: 0;
}
html.v-decoration:not(.v-colour) .hero__deco-o {
  padding: calc(var(--globe-size) * 1.1 * 0.06);
  transform: translateX(calc(2px / 1.0187));   /* 2px right on screen (the hero is drawn at 1.0187) */
}
/* The word as vapour (js/hero-vapor.js): a canvas over the hero draws it;
   once it has, the real letters and O are hidden underneath. */
.hero__vapor { display: none; }
html.v-decoration:not(.v-colour) .hero__vapor {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
}
html.v-decoration:not(.v-colour) #home-hero.is-vapor .hero__text,
html.v-decoration:not(.v-colour) #home-hero.is-vapor .hero__deco-o { visibility: hidden; }
/* No About section: the footer comes straight after the landing, and a
   case study just opens over the page (js/work-panel.js), so the blurb's
   links keep their ink while it's open. */
html.v-decoration:not(.v-colour) body.wp-open .home-blurb .intro__link { color: var(--ink); }
/* The close button stands in for the pointer anywhere beside the open
   panel (js/close-cursor.js), so the real one hides there. */
html.v-decoration:not(.v-colour) body.close-cursor-on :is(#home, .site-footer) { cursor: none; }

/* The footer is just its social bar (js/footer.js sizes it). */
html.v-decoration:not(.v-colour) .footer__blue { padding-top: 0; }
/* Footer bar (Figma 4444:81892): the note on the left, the links on the
   8th grid line, the credit on the right; white on the blue, 117px tall. */
.footer__note { display: none; }
html.v-decoration:not(.v-colour) .footer__bottom-bar { align-items: baseline; justify-content: flex-start; flex-wrap: wrap; column-gap: 24px; row-gap: 8px; }   /* the credit drops to its own line when there's no room */
html.v-decoration:not(.v-colour) .footer__note {
  display: block;
  flex: 0 0 calc(var(--col-step) * 8 - 24px);   /* less the bar's column-gap, so the links start on the grid line */
  padding-right: 24px;
  box-sizing: border-box;
  margin: 0;
  font-family: var(--font);
  font-size: 14px;
  line-height: normal;
  color: #fff;
}
html.v-decoration:not(.v-colour) .footer__social,
html.v-decoration:not(.v-colour) .footer__credit { font-size: 16px; margin: 0; }
html.v-decoration:not(.v-colour) .footer__credit { display: block; margin-left: auto; }   /* (styles.css hides it on phones) */
@media (max-width: 1200px) {
  html.v-decoration:not(.v-colour) .footer__social,
  html.v-decoration:not(.v-colour) .footer__credit { font-size: 14px; }   /* match the note */
}
@media (max-width: 1090px) {
  html.v-decoration:not(.v-colour) .footer__note { display: none; }       /* the links take its place */
}
/* Under 400px: just the links, centred, with the same space above and
   below them (js/footer.js sizes the bar); the credit goes. */
@media (max-width: 399px) {
  html.v-decoration:not(.v-colour) .footer__bottom-bar {
    flex-direction: column;
    align-items: center;
  }
  html.v-decoration:not(.v-colour) .footer__social { margin: 0; text-align: center; }
  html.v-decoration:not(.v-colour) .footer__credit { display: none; }
}

/* Type sizes: the About blurb 16px, the corner labels 16px. */
html.v-decoration:not(.v-colour) .home-blurb { font-size: 16px; line-height: 1.6; }
html.v-decoration:not(.v-colour) .home-meta__name,
html.v-decoration:not(.v-colour) .home-meta__title,
html.v-decoration:not(.v-colour) .home-meta__time,
html.v-decoration:not(.v-colour) .home-meta__role,
html.v-decoration:not(.v-colour) .home-meta__year { font-size: 16px; }

/* Loading (js/deco-intro.js): the O forms on a canvas over the page while
   the rest waits hidden, then fades in as the O shrinks into place. */
.deco-intro__canvas {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 60;
  pointer-events: none;
}
html.deco-intro-o .hero__deco-o { visibility: hidden; }   /* until the canvas hands over */
html.deco-intro .home-sticky::before,
html.deco-intro .hero__text,
html.deco-intro #home-meta,
html.deco-intro .home-blurb { opacity: 0; }
html.deco-intro.deco-intro-in .home-sticky::before,
html.deco-intro.deco-intro-in .hero__text,
html.deco-intro.deco-intro-in #home-meta,
html.deco-intro.deco-intro-in .home-blurb {
  opacity: 1;
  transition: opacity 1000ms cubic-bezier(0.65, 0, 0.35, 1);
}

html.v-decoration:not(.v-colour) #home-hero { transform: translateY(var(--hero-shift, -60px)) scale(1.0187); }
/* The scaled hero's (invisible) box reaches past the landing on small
   screens; clip it so it can't lengthen the page — the landing only ever
   scrolls far enough to reveal the footer. */
html.v-decoration:not(.v-colour) .home-sticky { overflow: clip; }   /* 5% up on 0.9702; js/hero-centre.js sets the lift so it sits mid-way between the labels and the About copy */


/* The About copy, justified, its first line indented 56px; six columns
   wide (from the middle grid line), sitting on the bottom-right margins. */
.v-decoration .home-blurb {
  display: block;
  position: absolute;
  right: var(--edge);
  bottom: var(--edge);
  z-index: 2;
  width: calc(var(--col-step) * 6);          /* the middle grid line to the margin */
  margin: 0;
  font-size: 12px;
  line-height: 1.43;
  letter-spacing: -0.0225em;                  /* tight enough to set in six lines from 1440px wide */
  text-align: justify;
  text-indent: 56px;
  color: #9f9f9f;
}
.v-decoration .home-blurb .intro__link { color: var(--ink); }

/* ── Blue ──────────────────────────────────────────────────────────────── */
/* Decoration (html.v-decoration is on too) all in #0066FF — type, links,
   the O (Decorated_o-blue.svg, the <img> src), the
   accent (footer, vapour) — on #f9f9f9; the case-study window's text keeps
   Orange's warm black. The blurb's body
   copy takes the blue at half strength so its links still stand out. */
html.v-orange.v-blue { --blue: #0066FF !important; --ink: #0066FF; --hero-ink: #0066FF; --muted: color-mix(in srgb, #0066FF 60%, #f9f9f9); --bg: #f9f9f9; }
html.v-blue .home-sticky { --ink: #0066FF; --hero-ink: #0066FF; }
html.v-blue .wp { --wp-ink: #342d2a; }   /* the case-study text stays Orange's black */
html.v-blue .wp-shot__btn,
html.v-blue .close-cursor__pill,
html.v-blue .wp-close { color: #342d2a; }   /* and the close buttons' icons */
html.v-blue .home-blurb { color: var(--muted); }
/* The column grid as the original blue build drew it: the blue at 10% on
   the page, white at 5% over the blue footer. */
html.v-orange.v-blue { --grid-ink: color-mix(in srgb, #0066FF 10%, transparent); }
html.v-blue .footer__blue::before {
  background-image: linear-gradient(
    to right,
    rgba(255, 255, 255, 0.05) 0px,
    rgba(255, 255, 255, 0.05) 1px,
    transparent 1px,
    transparent 100%
  );
}
/* Keep the footer's grid on the landing's columns at every width (styles.css
   switches it to 4 columns on phones). */
html.v-decoration:not(.v-colour) .footer__blue::before {
  background-size: calc(var(--col-step) * 2) 100%;
  background-position: var(--edge) 0;
}
html.v-blue .home-blurb .intro__link { background-size: 100% 1px; }   /* links always underlined (the hover-sweep line, held full) */


/* The labels: Orange has "Product Designer*" bottom-left. Decoration and
   the versions built on it set two columns on the grid — "Tim Kennedy" over
   "Melbourne, Australia" on the margin line, "Product Designer" over
   "Local time: 14:05:09" (a live clock) on the next line along. */
.home-meta__loc,
.home-meta__title,
.home-meta__time { display: none; }
.v-decoration .home-meta__job { display: none; }
.v-decoration .home-meta__loc { display: inline; }
.v-decoration .home-meta__title,
.v-decoration .home-meta__time {
  display: block;
  position: absolute;
  left: calc(var(--col-step) * 2);        /* the second grid line */
  white-space: nowrap;
  font-size: 18px;
  line-height: 1.3;
  color: var(--ink);
}
.v-decoration .home-meta__title { top: 0; }
.v-decoration .home-meta__time { bottom: 0; }
@media (max-width: 1200px) {
  .v-decoration .home-meta__time { display: none; }    /* crowds the About text */
}
/* Wider than a 13" MacBook Air (1470px): six columns reads too wide, so
   the About copy steps back to four (the 8th grid line to the margin). */
@media (min-width: 1471px) {
  .v-decoration .home-blurb { width: calc(var(--col-step) * 4); }
}
/* 1030px and under: the corner labels step down to 14px. */
@media (max-width: 1030px) {
  html.v-decoration:not(.v-colour) .home-meta__name,
  html.v-decoration:not(.v-colour) .home-meta__title,
  html.v-decoration:not(.v-colour) .home-meta__time,
  html.v-decoration:not(.v-colour) .home-meta__role,
  html.v-decoration:not(.v-colour) .home-meta__year { font-size: 14px; }
}
/* 740px and under: the role tucks under the name, small and in the About
   copy's light ink (stays on phones too)… */
@media (max-width: 740px) {
  /* The name and the year a touch larger, matching the About copy. */
  html.v-decoration:not(.v-colour) .home-meta__name,
  html.v-decoration:not(.v-colour) .home-meta__year { font-size: 17px; }
  html.v-decoration:not(.v-colour) .home-meta__title {
    display: block;
    left: 0;
    top: calc(17px * 1.3 + 4px);           /* one name line down, plus a little air */
    font-size: 12px;
    color: var(--muted);
  }
  /* A bigger O with smaller letters around it: the type at 60% of its
     desktop size relative to the O, so the cap height (top of the T/h to
     the baseline) is ~0.47 of the O and the caps, not the full ink span,
     centre on it; then the lot scaled up to fill the width. */
  html.v-decoration:not(.v-colour) #home-hero > .hero__text {
    --hero-font: calc(11.42vw * 0.6);
    top: calc(0.124em - 4px / 2.2);       /* 4px higher on screen (the hero is drawn at 2.2) */
  }
  /* Gaps either side of the O ~0.063 of its width, as in the design: Tim
     and thy nudged in (in the hero's own units, before the 2.2 scale), thy
     a hair lower so its caps sit level with Tim's. */
  html.v-decoration:not(.v-colour) #home-hero > #hero-tim { left: 0.34vw; }
  html.v-decoration:not(.v-colour) #home-hero > #hero-thy { left: 0.318vw; }
  html.v-decoration:not(.v-colour) .hero__deco-o { transform: translateX(0.27vw); }   /* the desktop 2px nudge, in vw so it scales */
  html.v-decoration:not(.v-colour) #home-hero { transform: translateY(var(--hero-shift, -60px)) scale(2.2); }
  /* …so the bottom-left label goes, and the About copy runs margin to
     margin along the bottom. */
  html.v-decoration:not(.v-colour) .home-meta__role { display: none; }
  html.v-decoration:not(.v-colour) .home-blurb {
    left: var(--edge);
    right: var(--edge);
    bottom: 48px;                       /* clear of iOS Safari's bottom toolbar */
    width: auto;
    font-size: 17px;
  }
  html.v-blue .home-blurb .intro__link { background-size: 0% 1px; }   /* no underline on phones */
}
/* 740px and under: the tighter 24px margins and a 4-column grid, on the
   landing and the footer alike. The case-study window keeps its 32px. */
@media (max-width: 740px) {
  html.v-decoration:not(.v-colour) body:has(#home) {
    --edge: 24px;
    --col-step: calc((100vw - 48px) / 12);
  }
  html.v-decoration:not(.v-colour) body:has(#home) .wp {
    --edge: 32px;
    --col-step: calc((100vw - 64px) / 12);
  }
  html.v-decoration:not(.v-colour) .home-sticky::before,
  html.v-decoration:not(.v-colour) .footer__blue::before {
    background-size: calc((100vw - 48px) / 4) 100%;
    background-position: var(--edge) 0;
  }
}
/* …then Melbourne's time, 24-hour (js/local-time.js): each digit in a slot
   as wide as the widest, so it doesn't shuffle as it ticks. */
.home-meta__digit {
  display: inline-block;
  width: var(--clock-dw, 0.73em);
  text-align: center;
}


/* ── Palette ───────────────────────────────────────────────────────────── */
/* Orange — the accent runs through the footer, loader panel, page wipe and
   focus. !important so it also beats a colour saved by the old swatch menu,
   which page-wipe.js sets inline on <html> (inline beats normal rules). */
html.v-orange {
  --blue: #ff6801 !important;
  --ink: #342d2a;              /* a warm near-black with the orange */
  --hero-ink: #342d2a;         /* the wordmark + its globe */
  --muted: #9f9f9f;
  --grid-ink: color-mix(in srgb, #000 5%, transparent);
  --hero-globe-back: 0.06;     /* the globe's back strokes, lighter on the dark ink */
}
html.v-orange,
html.v-orange body { color: var(--ink); }

/* The footer's grid lines a touch stronger on the orange. */
.v-orange .footer__blue::before {
  background-image: linear-gradient(
    to right,
    rgba(255, 255, 255, 0.07) 0px,
    rgba(255, 255, 255, 0.07) 1px,
    transparent 1px,
    transparent 100%
  );
}
/* …and the icons on the close button and image arrows to match (Blue02
   uses the same near-black in the case-study window). */
.v-orange .close-cursor__pill,
.v-orange .wp-shot__btn { color: var(--ink); }
/* ── Landing (Orange) ──────────────────────────────────────────────────── */
.v-orange .hero__text { color: var(--hero-ink); }
.v-orange .cursor-coords,
.v-orange .home-meta__name,
.v-orange .home-meta__role,
.v-orange .home-meta__year { color: var(--ink); }

/* Loader: the "thinking" text in ink (finished steps settle to 55% as in
   the blue build); the panel that rises after it takes the accent. */
.v-orange #page-loader { color: var(--ink); }

/* Neutral column grid — Orange throughout. */
.v-orange .home-sticky::before {
  background-image: linear-gradient(
    to right,
    var(--grid-ink) 0px,
    var(--grid-ink) 1px,
    transparent 1px,
    transparent 100%
  );
}


/* ── About links ───────────────────────────────────────────────────────── */
/* Links: black, no rule until hovered (the sweep in home-about.css). */
.v-alt .intro__link { color: var(--ink); }
.v-alt .intro__link:focus-visible { outline-color: var(--ink); }
/* A case study open: links stay in ink (overrides the blue build's
   grey-out). */
html.v-alt body.wp-open .intro__link { color: var(--ink); }

/* The case-study window's black text in the same ink (Orange, Blue02). */
.v-orange .wp { --wp-ink: var(--ink); }