/* ==========================================================================
   DANIEL — TELEVISION WRITER
   One stylesheet for all five pages.

   COLOUR SCHEME: light by default. To switch the whole site to the dark
   "gothic" look, add data-theme="gothic" to the <html> tag on every page:

       <html lang="en" data-theme="gothic">

   Nothing else changes — every colour below follows automatically.
   ========================================================================== */

@font-face {
  font-family: "Tinos";
  src: url("fonts/tinos-regular-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Tinos";
  src: url("fonts/tinos-bold-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "Roboto Slab";
  src: url("fonts/roboto-slab-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
}

/* --------------------------------------------------------------------------
   1. DESIGN TOKENS
   Every colour, font and spacing value lives here. Nothing below this block
   hardcodes a colour — the layout rules only ever use var(--something).
   -------------------------------------------------------------------------- */

:root {
  /* ---- light (default) ---- */
  --bg:          #eceae7;
  --bg-alt:      #e2dfdb;
  --bg-band:     #121110;
  --text:        #14130f;
  --text-dim:    #5f5c58;
  --accent:      #14130f;
  --rule:        #cfcbc4;
  --watermark:   rgba(20,19,15,0.05);
  --frame-solid: #d6d2cc;
  --frame-line:  #b4afa8;

  --on-accent:   #f7f4f1;
  --accent-text: #14130f;
  --accent-band: #f2efec;   /* neutral mark on the dark band */
  --band-text:   #f2efec;
  --band-dim:    #b0aaa3;
  --band-rule:   #2b2926;
  --band-mark:   rgba(242,239,236,0.05);
  --highlight:   #14130f;
  --marker-fg:   #f7f4f1;
  --focus:       #14130f;
  --shadow:      rgba(20,19,15,0.18);

  /* photo treatment — see the .frame img rule further down */
  --photo-filter: grayscale(1);

  /* solid filled boxes (IMDb, Contact, Read Request, Enquire, scroll cue).
     Add data-buttons="black" to the <html> tag to make them black instead. */
  --btn-bg: var(--accent);
  --btn-fg: var(--on-accent);

  /* ---- type ---- */
  /* ponytail: licensed originals are unavailable; local fonts approximate
     Riccione's Times-like serif and Franklin's light half-serif shapes. */
  --font-display: "Riccione Serial", "Tinos", "Times New Roman", serif;
  --font-body:    "Franklin Gothic Raw Semi Serif Light", "Roboto Slab", Georgia, serif;

  --size-hero:  clamp(3.4rem, 9.5vw, 8rem);
  --size-h2:    clamp(2.2rem, 5vw, 3.9rem);
  --size-h3:    clamp(1.9rem, 4vw, 3.1rem);
  --size-body:  1rem;
  --size-small: 0.72rem;

  /* ---- spacing / structure ---- */
  --shell:        1180px;
  --rail-width:   170px;
  --gutter:       40px;
  --band-pad:     clamp(72px, 11vw, 148px);
  --frame-offset: 18px;   /* how far the layered frame slabs sit off-centre */
  --tile-gap:     12px;
}

/* Black filled boxes instead of oxblood. Light text stays white; on the dark
   gothic theme a black button would vanish, so it flips to bone there. */
[data-buttons="black"] {
  --btn-bg: #14130f;
  --btn-fg: #f7f4f1;
}
[data-theme="gothic"][data-buttons="black"] {
  --btn-bg: #e8e3dc;
  --btn-fg: #14130f;
}

[data-theme="gothic"] {
  --bg:          #0e0d0f;
  --bg-alt:      #16151a;
  --bg-band:     #08080a;
  --text:        #e8e3dc;
  --text-dim:    #9c948d;
  --accent:      #8c2f33;
  --rule:        #2b282f;
  --watermark:   rgba(232,227,220,0.04);
  --frame-solid: #1f1d22;
  --frame-line:  #3a3640;

  --on-accent:   #f7f4f1;
  --accent-text: #c8797c;   /* lifted so it clears 4.5:1 as text on dark */
  --accent-band: #c8797c;
  --band-text:   #e8e3dc;
  --band-dim:    #9c948d;
  --band-rule:   #262329;
  --band-mark:   rgba(232,227,220,0.045);
  --highlight:   #e8e3dc;
  --marker-fg:   #14130f;
  --focus:       #d6a0a2;
  --shadow:      rgba(0,0,0,0.55);
}

/* --------------------------------------------------------------------------
   2. BASE
   -------------------------------------------------------------------------- */

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

html { overflow-x: hidden; }

body {
  margin: 0;
  padding-left: var(--rail-width);
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--size-body);
  line-height: 1.75;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main { flex: 1; display: flex; flex-direction: column; }
main > .band--dark { flex: 1; }

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

a:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
}

/* --------------------------------------------------------------------------
   3. LAYOUT SHELL + FULL-WIDTH BANDS
   -------------------------------------------------------------------------- */

.shell {
  width: 100%;
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.band {
  position: relative;
  overflow: hidden;              /* keeps the oversized watermarks in check */
  padding: var(--band-pad) 0;
}
.band--light { background: var(--bg); }
.band--mid   { background: var(--bg-alt); }
.band--dark  { background: var(--bg-band); color: var(--band-text); }

.layer { position: relative; z-index: 1; }

/* --------------------------------------------------------------------------
   4. TYPOGRAPHY
   Display: bold serif, tight leading. Body: light slab serif, airy.
   -------------------------------------------------------------------------- */

.display {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.035em;
  margin: 0;
  color: var(--text);
  text-wrap: balance;
}

h1.display { font-size: var(--size-hero); }
h2.display { font-size: var(--size-h2); }
h3.display { font-size: var(--size-h3); line-height: 1.06; }

.lede,
.copy p {
  font-weight: 300;
  color: var(--text-dim);
  line-height: 1.78;
  max-width: 62ch;
}
.lede { font-size: 1.06rem; }
.copy p { margin: 0 0 1.35em; }
.copy p:last-child { margin-bottom: 0; }
.copy em { font-style: italic; color: var(--text); }

.eyebrow {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--size-small);
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin: 0 0 18px;
}

.meta {
  font-size: var(--size-small);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin: 14px 0 0;
}

/* --------------------------------------------------------------------------
   5. LAYERED PHOTO FRAMES
   photo + solid slab offset down-right + hairline outline offset up-left
   -------------------------------------------------------------------------- */

.frame {
  position: relative;
  margin: 0;
  isolation: isolate;
}
.frame::before,
.frame::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.frame::before {
  background: var(--frame-solid);
  transform: translate(var(--frame-offset), var(--frame-offset));
  z-index: 0;
}
.frame::after {
  border: 1px solid var(--frame-line);
  transform: translate(calc(var(--frame-offset) * -1), calc(var(--frame-offset) * -1));
  z-index: 1;
}
.frame > .frame__media {
  position: relative;
  z-index: 2;
  box-shadow: 0 22px 44px -18px var(--shadow);
}
/* Photo treatment. Black and white by default — that is the original look.
   For full colour, add data-photo="color" to the <html> tag (see below). */
.frame img {
  filter: var(--photo-filter);
  width: 100%;
  height: auto;
}
[data-photo="color"] .frame img { filter: none; }

/* photo collage, framed as one unit. Two columns, images keep their natural
   shape — the stills are a mix of portrait and wide cinematic frames, and
   cropping them all to squares would ruin the wide ones. */
.tiles {
  display: flex;
  flex-direction: column;
  gap: var(--tile-gap);
  background: var(--bg-alt);
  padding: var(--tile-gap);
}
.band--mid .tiles { background: var(--bg); }

/* A justified row: each photo's width grows in proportion to its own aspect
   ratio (--ar, set inline per image), so every photo in the row lands on the
   same height and the row fills the width exactly. Nothing is cropped and the
   bottom edges line up. */
.tile-row {
  display: flex;
  gap: var(--tile-gap);
}
.tile-row img {
  flex: var(--ar, 1) 1 0;
  min-width: 0;
  width: 100%;
  height: auto;
}

/* --------------------------------------------------------------------------
   7. WATERMARK HEADINGS — huge pale word behind the real content
   -------------------------------------------------------------------------- */

.watermark {
  position: absolute;
  z-index: 0;
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.05em;
  line-height: 0.78;
  color: var(--watermark);
  white-space: nowrap;
  user-select: none;
  pointer-events: none;
  font-size: clamp(5rem, 19vw, 15rem);
}
.watermark--left  { left: -0.06em; }
.watermark--right { right: -0.06em; }

/* --------------------------------------------------------------------------
   8. BUTTONS
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 15px 24px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--size-small);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
  border: 0;
  transition: transform 0.18s ease, filter 0.18s ease;
}
.btn:hover { filter: brightness(1.16); transform: translate(-2px, -2px); }
.btn svg { flex: none; }

.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border: 1px solid var(--frame-line);
  color: var(--text);
  text-decoration: none;
  transition: border-color 0.18s ease, color 0.18s ease;
}
.btn-icon:hover { border-color: var(--accent); color: var(--accent-text); }

.btn-row {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 40px;
}

/* --------------------------------------------------------------------------
   9. NAVIGATION RAIL
   -------------------------------------------------------------------------- */

.site-rail {
  position: fixed;
  inset: 0 auto 0 0;
  width: var(--rail-width);
  padding: 40px;
  display: flex;
  flex-direction: column;
  justify-content: safe center;
  overflow-y: auto;
  z-index: 10;
  background: var(--bg);
  border-right: 1px solid var(--rule);
}
.site-rail ul {
  display: flex;
  flex-direction: column;
  gap: 26px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-rail ul a {
  display: inline-block;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--text);
  border-bottom: 2px solid transparent;
}
.site-rail ul a:hover,
.site-rail ul a[aria-current="page"] { border-color: currentColor; }

/* --------------------------------------------------------------------------
   10. HOME
   -------------------------------------------------------------------------- */

.hero { padding: 0; }
.hero__stage {
  position: relative;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  overflow: hidden;
}
.hero__portrait { height: 100vh; }
.hero__portrait img {
  width: auto;
  max-width: none;
  height: 100%;
  filter: var(--photo-filter);
}
.hero__title {
  position: absolute;
  inset: 0 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  min-height: 112px;
  padding: 24px clamp(20px, 3vw, 64px);
  margin: 0;
  background: linear-gradient(to bottom, rgba(8, 8, 10, 0.92), rgba(8, 8, 10, 0.68) 74%, transparent);
  color: var(--band-text);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.8rem, 3.5vw, 3.5rem);
  line-height: 1;
  pointer-events: none;
}
.hero__first { grid-column: 1; grid-row: 1; justify-self: start; }
.hero__last { grid-column: 3; grid-row: 1; justify-self: end; }
.hero__role {
  grid-column: 2;
  grid-row: 1;
  justify-self: center;
  padding: 5px 12px;
  background: rgba(8, 8, 10, 0.72);
  font-family: var(--font-body);
  font-size: clamp(1rem, 2vw, 1.4rem);
  font-weight: 300;
  white-space: nowrap;
}
.hero__links {
  position: absolute;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  z-index: 2;
  margin: 0;
  flex-wrap: nowrap;
}

/* --------------------------------------------------------------------------
   11. BIO
   -------------------------------------------------------------------------- */

.bio .shell {
  display: grid;
  grid-template-columns: 0.82fr 1.18fr;
  gap: clamp(40px, 7vw, 90px);
  align-items: start;
}
.bio__portrait { position: relative; max-width: 340px; width: 100%; }

/* --------------------------------------------------------------------------
   12. SAMPLES
   -------------------------------------------------------------------------- */

.sample {
  position: relative;
  padding: clamp(54px, 7vw, 96px) 0;
}
.sample + .sample { border-top: 1px solid var(--rule); }

.sample__grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(40px, 6vw, 84px);
  align-items: center;
}
.sample__art { position: relative; }
.sample__more summary {
  cursor: pointer;
  padding: 12px var(--tile-gap);
  font-size: var(--size-small);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  background: var(--bg-alt);
}
.sample__more summary:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; }
[data-theme="gothic"] .sample .copy p,
[data-theme="gothic"] .sample .meta { color: var(--band-text); }

/* --------------------------------------------------------------------------
   12b. FREELANCE
   -------------------------------------------------------------------------- */

.freelance__intro {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(40px, 6vw, 84px);
  align-items: center;
}
.freelance__portrait { position: relative; width: 100%; }

/* the five services — a menu, not a sequence, so no step numbers */
.services {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(32px, 4vw, 56px);
  margin-top: clamp(56px, 7vw, 90px);
}
.service h3 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.3rem;
  letter-spacing: -0.02em;
  margin: 0 0 12px;
  color: var(--text);
}
.service p {
  margin: 0;
  color: var(--text-dim);
  line-height: 1.75;
  max-width: 48ch;
}

/* --------------------------------------------------------------------------
   13. CONTACT — dark band in both themes
   -------------------------------------------------------------------------- */

.contact { color: var(--band-text); }
.contact a:focus-visible { outline-color: var(--accent-band); }
.contact .display,
.contact .eyebrow { color: var(--band-text); }
.contact .lede,
.contact p { color: var(--band-dim); }

.contact__cols {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(40px, 6vw, 90px);
  margin-top: 54px;
}

.linklist { list-style: none; margin: 0; padding: 0; }
.linklist li { border-top: 1px solid var(--band-rule); }
.linklist li:last-child { border-bottom: 1px solid var(--band-rule); }
.linklist a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 2px;
  text-decoration: none;
  color: var(--band-text);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.24rem;
  letter-spacing: -0.02em;
  transition: color 0.18s ease, padding-left 0.18s ease;
}
.linklist a:hover { color: var(--accent-band); padding-left: 10px; }
.linklist .linklist__hint {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--size-small);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--band-dim);
}


/* --------------------------------------------------------------------------
   14. SITE FOOTER — the thin colophon strip on every page
   -------------------------------------------------------------------------- */

.site-footer {
  background: var(--bg-band);
  color: var(--band-dim);
  padding: 26px 0;
}
.site-footer .shell {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  font-size: var(--size-small);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.site-footer a { text-decoration: none; color: var(--band-text); }
.site-footer a:hover { color: var(--accent-band); }

/* the contact page already ends in a dark band — drop the seam between them */
.contact + .site-footer { padding-top: 0; }

/* --------------------------------------------------------------------------
   15. MOBILE — one breakpoint, everything stacks to a single column
   -------------------------------------------------------------------------- */

@media (max-width: 768px) {
  :root {
    --gutter: 20px;
    --frame-offset: 8px;
    --band-pad: 64px;
    --tile-gap: 8px;
  }

  body { padding-left: 0; }
  .site-rail {
    position: relative;
    inset: auto;
    width: 100%;
    padding: 20px var(--gutter);
    border-right: 0;
    border-bottom: 1px solid var(--rule);
  }
  .site-rail ul { gap: 12px; }

  .bio .shell,
  .sample__grid,
  .freelance__intro,
  .contact__cols {
    grid-template-columns: 1fr;
  }

  .hero__stage { min-height: 72svh; }
  .hero__portrait { height: 72svh; display: flex; align-items: center; }
  .hero__portrait img { max-width: 100%; height: auto; max-height: 100%; }
  .hero__title {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    row-gap: 10px;
    min-height: 112px;
    padding: 22px 20px 32px;
    font-size: clamp(1.8rem, 7vw, 3rem);
  }
  .hero__last { grid-column: 2; }
  .hero__role { grid-column: 1 / -1; grid-row: 2; }
  .hero__links { bottom: 22px; }
  .bio__portrait { margin: 0 auto; max-width: 100%; }

  .tile-row { flex-direction: column; }

  .watermark { font-size: clamp(3.6rem, 22vw, 7rem); }

  .linklist a { font-size: 1.05rem; }
  .btn-row { gap: 10px; }
}