/*
 * adesh studio — main stylesheet
 *
 * Layer order (later layers win regardless of selector specificity):
 *   reset → tokens → base → layout → components → utilities
 */
@layer reset, tokens, base, layout, components, utilities;

/* Hack 3.3.0 (MIT licence, see /assets/fonts/LICENSE.md), self-hosted.
   font-display: swap shows the fallback font immediately and swaps Hack in
   when it has loaded, so text is never invisible. */
@font-face {
  font-family: "Hack";
  src: url("/assets/fonts/hack-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

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

@font-face {
  font-family: "Hack";
  src: url("/assets/fonts/hack-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Hack";
  src: url("/assets/fonts/hack-bolditalic.woff2") format("woff2");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

/* Fallback while Hack loads (or if it fails). Menlo (Mac/iPhone) and
   DejaVu Sans Mono (Linux) share Hack's character width (0.602 em, all derived
   from Bitstream Vera), so text doesn't shift when Hack swaps in. Windows'
   Consolas is narrower (0.550 em) and is scaled up to the same width. */
@font-face {
  font-family: "Hack Fallback Consolas";
  src: local("Consolas");
  size-adjust: 109.5%;
}

/* ------------------------------------------------------------------ */
/* Tokens                                                              */
/* ------------------------------------------------------------------ */
@layer tokens {
  :root {
    /* Colour — white text on a background photo (see "Page background").
       --color-bg is the dark fallback shown until the photo loads.
       (Previous light theme: background #ece8e3, text #2b1f22.) */
    --color-bg: #211d24;
    --color-text: #ffffff;
    --color-muted: rgb(255 255 255 / 0.75);
    --color-subtle: rgb(255 255 255 / 0.6);
    --color-line: color-mix(in oklab, var(--color-text) 25%, transparent);
    --color-link-line: rgb(255 255 255 / 0.35); /* resting underline of links in text */

    /* Page background: photo under a dark overlay that keeps white text
       readable on the photos' light areas */
    --bg-overlay: linear-gradient(rgb(0 0 0 / 0.45), rgb(0 0 0 / 0.45));
    --bg-image: image-set(
      url("/assets/img/bg/victoria.avif") type("image/avif"),
      url("/assets/img/bg/victoria.jpg") type("image/jpeg")
    );

    /* Typography
       Primary: Hack (MIT licence), self-hosted in /assets/fonts (hack-font@3.3.0).
       Fallbacks: width-matched to Hack (see @font-face at the top). */
    --font-primary: "Hack", Menlo, "DejaVu Sans Mono", "Hack Fallback Consolas",
      ui-monospace, monospace;
    /* Secondary: Helvetica Neue is a system font (macOS/iOS), not a web font.
       Fallbacks in order: Helvetica (older Apple), Arial (Windows; metric-
       compatible with Helvetica), Nimbus Sans / Liberation Sans / Arimo
       (Linux clones), then the platform sans-serif (Roboto on Android). */
    --font-secondary: "Helvetica Neue", Helvetica, Arial, "Nimbus Sans",
      "Liberation Sans", Arimo, sans-serif;

    /* Type scale. Body (step 0) and small text (step -1) are fixed so
       Hack stays compact; steps 1–5 are fluid (Utopia-style):
       320px → 1440px viewport, 16px @ 1.2 ratio → 18px @ 1.25 ratio */
    --step--1: 0.75rem;  /* 12px */
    --step-0: 0.875rem;  /* 14px */
    --step-1: clamp(1.2rem, 1.1411rem + 0.2946vw, 1.4063rem);
    --step-2: clamp(1.44rem, 1.3492rem + 0.454vw, 1.7578rem);
    --step-3: clamp(1.728rem, 1.5939rem + 0.6704vw, 2.1973rem);
    --step-4: clamp(2.0736rem, 1.8814rem + 0.9613vw, 2.7466rem);
    --step-5: clamp(2.4883rem, 2.2183rem + 1.3499vw, 3.4332rem);

    /* Fluid space scale */
    --space-3xs: clamp(0.25rem, 0.2321rem + 0.0893vw, 0.3125rem);
    --space-2xs: clamp(0.5rem, 0.4821rem + 0.0893vw, 0.5625rem);
    --space-xs: clamp(0.75rem, 0.7143rem + 0.1786vw, 0.875rem);
    --space-s: clamp(1rem, 0.9643rem + 0.1786vw, 1.125rem);
    --space-m: clamp(1.5rem, 1.4464rem + 0.2679vw, 1.6875rem);
    --space-l: clamp(2rem, 1.9286rem + 0.3571vw, 2.25rem);
    --space-xl: clamp(3rem, 2.8929rem + 0.5357vw, 3.375rem);
    --space-2xl: clamp(4rem, 3.8571rem + 0.7143vw, 4.5rem);
    --space-3xl: clamp(6rem, 5.7857rem + 1.0714vw, 6.75rem);

    /* Layout */
    --content-width: 65ch;
    --wide-width: 75rem;
    --gutter: var(--space-s);

    /* Misc */
    --radius: 0.25rem;
    --ease: cubic-bezier(0.2, 0, 0, 1);
    --focus-ring: 2px solid var(--color-text);
  }
}

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

  * {
    margin: 0;
  }

  html {
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
  }

  body {
    min-block-size: 100dvh;
    -webkit-font-smoothing: antialiased;
  }

  img,
  picture,
  video,
  canvas,
  svg {
    display: block;
    max-inline-size: 100%;
    block-size: auto;
  }

  input,
  button,
  textarea,
  select {
    font: inherit;
  }

  p,
  li,
  figcaption {
    text-wrap: pretty;
  }

  h1,
  h2,
  h3,
  h4 {
    text-wrap: balance;
  }

  ul[role="list"],
  ol[role="list"] {
    list-style: none;
    padding: 0;
  }

  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }
}

/* ------------------------------------------------------------------ */
/* Base                                                                */
/* ------------------------------------------------------------------ */
@layer base {
  html {
    color-scheme: dark;
    background-color: var(--color-bg);
    scroll-behavior: smooth;
  }

  body {
    color: var(--color-text);
    font-family: var(--font-primary);
    font-size: var(--step-0);
    line-height: 1.6;
    /* No automatic hyphenation: combined with text-wrap: pretty, browsers
       split words that would fit. overflow-wrap still breaks a word that is
       wider than the whole line, so nothing can overflow on small screens. */
    overflow-wrap: break-word;
  }

  h1,
  h2,
  h3,
  h4 {
    font-weight: 700;
    line-height: 1.6;
  }

  p {
    max-inline-size: var(--content-width);
  }

  h1 {
    font-family: var(--font-secondary);
    font-size: var(--step-0);
    font-weight: 400;
  }

  /* Section headings, list labels and the quote's attribution share one
     small, quiet label style */
  h2,
  dt,
  .quote > figcaption {
    font-size: 0.6875rem; /* 11px — Apple's recommended minimum */
    font-weight: 400;
    line-height: 1.6;
    color: var(--color-subtle);
    text-transform: uppercase;
    letter-spacing: 0.08em;
  }

  /* Subheadings (e.g. legal pages): body size; h3 bold, h4 italic */
  h3,
  h4 {
    font-size: var(--step-0);
  }

  h4 {
    font-weight: 400;
    font-style: italic;
  }

  /* Links: no underline at rest; on hover/keyboard focus a 1px line swipes
     in from the left. The line is a background gradient whose width
     animates from 0% to 100% (text-decoration itself can't be animated). */
  a {
    color: var(--color-text);
    text-decoration: none;
    background-image: linear-gradient(currentColor, currentColor);
    background-repeat: no-repeat;
    background-position: 0 100%;
    background-size: 0% 1px;
    transition: background-size 0.3s var(--ease);
  }

  a:hover,
  a:focus-visible,
  a[aria-current] {
    background-size: 100% 1px;
  }

  /* Links inside running text (paragraphs, list values) also show a faint
     line at rest, so they're recognisable without hover (touch screens,
     WCAG 1.4.1). Two layers: the swipe line on top, the faint line below. */
  :where(p, dd) a:not(.button) {
    background-image: linear-gradient(currentColor, currentColor),
      linear-gradient(var(--color-link-line), var(--color-link-line));
    background-size: 0% 1px, 100% 1px;
  }

  :where(p, dd) a:not(.button):hover,
  :where(p, dd) a:not(.button):focus-visible {
    background-size: 100% 1px, 100% 1px;
  }

  :focus-visible {
    outline: var(--focus-ring);
    outline-offset: 3px;
    border-radius: var(--radius);
  }

  ::selection {
    background-color: var(--color-text);
    color: var(--color-bg);
  }
}

/* ------------------------------------------------------------------ */
/* Layout primitives                                                   */
/* ------------------------------------------------------------------ */
@layer layout {
  /* Page background: a fixed layer behind everything, so the photo stays
     put while scrolling. Uses a pseudo-element instead of
     background-attachment: fixed, which iOS Safari ignores. */
  body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    background: var(--bg-overlay), var(--bg-image) center / cover no-repeat,
      var(--color-bg);
  }

  /* Sticky footer: header / main (fills) / footer */
  body {
    display: grid;
    grid-template-rows: auto 1fr auto;
  }

  body > main { grid-row: 2; }
  body > footer { grid-row: 3; }

  /* Centred container that respects iPhone safe areas */
  .wrapper {
    inline-size: 100%;
    max-inline-size: var(--wide-width);
    margin-inline: auto;
    padding-inline: max(var(--gutter), env(safe-area-inset-left))
      max(var(--gutter), env(safe-area-inset-right));
  }

  .wrapper[data-width="content"] {
    max-inline-size: calc(var(--content-width) + 2 * var(--gutter));
  }

  /* Vertical rhythm: .stack > * + * gets consistent spacing */
  .stack {
    display: flex;
    flex-direction: column;
    gap: var(--stack-space, var(--space-m));
  }

  /* Horizontal group that wraps */
  .cluster {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--cluster-space, var(--space-s));
  }

  .section {
    padding-block: var(--space-2xl);
  }

  /* Intro: fills the first screen, text vertically centred. The header
     floats on top of it (home pages only), so the intro starts at the very
     top. svh = height with the phone's browser bars visible, so the whole
     intro fits on screen on iPhone. */
  body:has(.intro) .site-header {
    position: absolute;
    inset-block-start: 0;
    inset-inline: 0;
    z-index: 1;
  }

  .intro {
    position: relative;
    min-block-size: 100svh;
    display: grid;
    align-content: center;
  }

  /* Two columns on wider screens (text | image), stacked on phones */
  .split {
    display: grid;
    gap: var(--space-xl);
    align-items: start;
  }

  @media (min-width: 48em) {
    .split {
      grid-template-columns: minmax(0, 1fr) minmax(0, 22rem);
    }
  }
}

/* ------------------------------------------------------------------ */
/* Components                                                          */
/* ------------------------------------------------------------------ */
@layer components {
  /* Skip link — hidden until focused */
  .skip-link {
    position: absolute;
    inset-block-start: var(--space-xs);
    inset-inline-start: var(--space-xs);
    z-index: 10;
    padding: var(--space-2xs) var(--space-s);
    background: var(--color-bg);
    color: var(--color-text);
    border-radius: var(--radius);
    transform: translateY(-200%);
    transition: transform 0.2s var(--ease);
  }

  .skip-link:focus {
    transform: none;
  }

  /* Scroll cue: small arrow at the bottom of the first screen that gently
     bobs, links to the next section and fades out once you scroll */
  .scroll-cue {
    position: absolute;
    inset-block-end: max(var(--space-m), env(safe-area-inset-bottom));
    inset-inline-start: 50%;
    translate: -50% 0;
    padding: var(--space-2xs); /* bigger tap target */
    line-height: 1;
    color: var(--color-muted);
    background-image: none; /* no hover underline */
  }

  .scroll-cue > [aria-hidden] {
    display: inline-block;
    animation: scroll-cue-bob 2.4s var(--ease) infinite;
  }

  @keyframes scroll-cue-bob {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(4px); }
  }

  /* Fade out over the first 15% of the screen height scrolled.
     Browsers without scroll-driven animations just keep the arrow. */
  @supports (animation-timeline: scroll()) {
    @media (prefers-reduced-motion: no-preference) {
      .scroll-cue {
        animation: scroll-cue-fade linear both;
        animation-timeline: scroll();
        animation-range: 0 15vh;
      }

      @keyframes scroll-cue-fade {
        to { opacity: 0; visibility: hidden; }
      }
    }
  }

  /* Quote (intro): the quote in body text, author and date below it */
  .quote {
    display: grid;
    gap: var(--space-s);
  }

  /* Attribution on the right, like the motto at the start of a book */
  .quote > figcaption {
    justify-self: end;
  }

  /* Button: outlined link for the main action (booking). A faint white
     tint on hover/focus; the text stays white. Min. 44px tall = Apple's recommended tap target. */
  .button {
    display: inline-flex;
    align-items: center;
    gap: 0.6em;
    min-block-size: 44px;
    padding: 0.6em 1.2em;
    border: 1px solid currentColor;
    border-radius: var(--radius);
    color: var(--color-text);
    background-image: none; /* no swipe underline */
    transition: background-color 0.2s var(--ease);
  }

  .button:hover,
  .button:focus-visible {
    background-color: rgb(255 255 255 / 0.2);
  }

  /* Headings sit 8–9px above the content they introduce (all pages):
     the negative margin shrinks the .stack gap (--space-m) below them */
  .stack > :is(h2, h3, h4) {
    margin-block-end: calc(var(--space-2xs) - var(--space-m));
  }

  /* Long text (legal pages): headings sit close to the text they introduce
     and far from the section before. Negative bottom margins shrink the
     .stack gap (--space-m) below a heading; top margins add to it. */
  .prose > h1 {
    margin-block-end: var(--space-s);
  }

  .prose > * + h2 {
    margin-block-start: var(--space-m); /* + gap = 48–54px */
  }

  .prose > * + h3 {
    margin-block-start: var(--space-2xs);
  }

  /* Page title directly followed by a section: no extra section space */
  .prose > h1 + h2 {
    margin-block-start: 0;
  }

  /* Placeholder for an image that doesn't exist yet: an empty frame in the
     final shape (4:5 portrait) */
  .placeholder {
    display: grid;
    place-items: center;
    aspect-ratio: 4 / 5;
    border: 1px dashed var(--color-line);
    color: var(--color-subtle);
    font-size: var(--step--1);
  }

  /* Label/value list (e.g. location and time): items top-aligned (values can
     have different line counts), wider gap between items */
  .info-list {
    align-items: start;
    --cluster-space: var(--space-s) var(--space-l);
  }

  /* Label above each value */
  .info-list dt {
    margin-block-end: var(--space-2xs);
  }

  /* Header */
  .site-header {
    padding-block: max(var(--space-s), env(safe-area-inset-top)) var(--space-s);
  }

  /* Three columns: nav | wordmark | (empty). The outer columns are
     equal (1fr each), so the wordmark sits exactly in the centre. */
  .site-header__inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: var(--space-s);
  }

  .site-header__inner > .wordmark {
    grid-column: 2;
    grid-row: 1;
  }

  .site-header__inner > .site-nav {
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
  }

  /* Wordmark: "adesh" in Helvetica Neue, "studio" smaller in Hack at 60% */
  .wordmark {
    font-family: var(--font-secondary);
    font-size: var(--step-1);
    font-weight: 400;
    color: var(--color-text);
    background-image: none; /* no hover underline on the logo */
  }

  .wordmark__second {
    font-family: var(--font-primary);
    font-size: 0.8em;
    color: var(--color-subtle);
  }

  .site-nav__list {
    --cluster-space: var(--space-2xs) var(--space-s);
  }

  .site-nav a,
  .lang-switch a {
    color: var(--color-text);
  }

  /* Language switch */
  .lang-switch {
    font-size: var(--step--1);
  }

  /* Footer */
  .site-footer {
    padding-block: var(--space-l) max(var(--space-l), env(safe-area-inset-bottom));
    border-block-start: 1px solid var(--color-line);
    font-size: var(--step--1);
    color: var(--color-muted);
  }

  /* Language switch left; contact and legal links right (also when there is
     no language switch) */
  .site-footer__contact {
    margin-inline-start: auto;
  }

  /* Taller tap area (WCAG 2.2 target size: 24px): 3px padding above and
     below the 19px line. The underline stays at the text (content-box). */
  .site-footer a {
    color: inherit;
    padding-block: 3px;
    background-origin: content-box;
  }
}

/* ------------------------------------------------------------------ */
/* Utilities                                                           */
/* ------------------------------------------------------------------ */
@layer utilities {
  .visually-hidden:not(:focus, :active) {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}