/* ==========================================================================
   NOONO STUDIO — homepage
   Rebuilt from the Readymag original as clean HTML/CSS/vanilla JS.

   Recovered design constants (source: rendered DOM + HAR):
     background   #563D1E
     gold         rgba(195,170,118,1)  →  #C3AA76
     white        #FFFFFF
     canvas       1024 × 516 page, 984 × 501 content block, centred both axes
     grid columns 201 | 301 | 302 | 180  (= 984)
     micro copy   Instrument Sans (custom_167814) 500 · 12px / 14px
     legal copy   Instrument Sans (custom_167814) 500 ·  8px / 14px
     statement    Playfair Display 400 roman + 400 italic · 60px / 60px
   ========================================================================== */

/* ── Fonts ───────────────────────────────────────────────────────────────
   custom_167814 = Instrument Sans (the project's uploaded webfont).
   Weight 600 is registered in the Readymag project but is NOT used on the
   homepage, so it is intentionally omitted.

   ASSET SWAP: download the .ttf, drop it at the first URL, then delete the
   rmcdn line. The two-URL src is a native CSS fallback — no JS required.
   ---------------------------------------------------------------------- */
@font-face {
  font-family: 'Instrument Sans Local';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../assets/fonts/InstrumentSans-Medium.ttf') format('truetype'),
       url('https://c-p.rmcdn.net/custom-fonts/font-8fdbbb5f-e9e7-401c-9a23-66656d31f976.ttf') format('truetype');
}

/* ── Tokens ─────────────────────────────────────────────────────────── */
:root {
  --bg:     #563D1E;
  --gold:   #C3AA76;
  --white:  #FFFFFF;

  --font-ui:   'Instrument Sans Local', 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;

  --content-w: 984px;   /* design content width  */
  --content-h: 501px;   /* design content height */
  --canvas-h:  516px;   /* design page height (content + 15px trailing) */
  --gutter:     20px;   /* min side gutter at desktop */

  /* Statement scales with the canvas so it never wraps or overflows.
     At the full 984px canvas the statement is 60px and measures ~650px
     against ~783px of available track, so the divisor is kept conservative. */
  --headline-size: min(60px, calc((100vw - (var(--gutter) * 2)) / 14.2));
  --headline-lh: 1;

  --reveal-duration: 900ms;   /* see note in the delivery report */
  --reveal-ease: ease-in;     /* animation-timing-function from the source keyframes */
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--white);
  font-family: var(--font-ui);
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
  overflow-x: hidden;
}

h1, p { margin: 0; }
img   { display: block; max-width: 100%; height: auto; }

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

/* ── Skip link ──────────────────────────────────────────────────────── */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 10px 16px;
  background: var(--gold);
  color: var(--bg);
  font-size: 12px;
  text-decoration: none;
}
.skip-link:focus { left: 8px; top: 8px; }

/* ── Stage / canvas ─────────────────────────────────────────────────── */
.stage {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  min-height: 100svh;
  padding: 40px var(--gutter);
}

.canvas {
  width: 100%;
  max-width: var(--content-w);
  /* Reproduces Readymag's 516px page box: content is 501px tall and the page
     it is centred inside is 516px, i.e. the block sits 7.5px above dead centre. */
  padding-bottom: calc(var(--canvas-h) - var(--content-h));
}

/* ── Grid rows ──────────────────────────────────────────────────────── */
.row {
  display: grid;
  grid-template-columns: 201fr 301fr 302fr 180fr;
  gap: 0;
}

.col--1 { grid-column: 1; }
.col--2 { grid-column: 2; }
.col--3 { grid-column: 3; }
.col--4 { grid-column: 4; }

.row--head { align-items: start; }

/* Footer: service labels are 28px tall (2 lines), Privacy Policy is 14px
   and sits at y=487 in the source — i.e. flush with the bottom of the row. */
.row--foot { align-items: end; }
.row--foot .micro { align-self: start; }

/* Vertical rhythm, 1:1 with the source coordinates
   head 0–28 · gap 170 · statement 198–318 · gap 155 · foot 473–501 */
.headline  { margin-top: 170px; }
.row--foot { margin-top: 155px; }

/* ── Typography ─────────────────────────────────────────────────────── */
.micro {
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 12px;
  line-height: 14px;
  min-height: 28px;
}
.micro--gold { color: var(--gold); }

.legal {
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 8px;
  line-height: 14px;
}

.brand__mark { width: 76px; height: 28px; margin-left: 3px; }

.headline {
  margin-left: calc(100% * 201 / 984);   /* aligns with grid column 2 */
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--headline-size);
  line-height: var(--headline-lh);
  letter-spacing: normal;
}
.headline__line { display: block; }
.headline__line--roman  { color: var(--gold);  font-style: normal; }
.headline__line--italic { color: var(--white); font-style: italic; }

/* Phone-only line breaks. Inert on desktop, so the statement stays two
   lines there and becomes four on the phone, exactly as the original. */
.br-m { display: none; }

/* ── Links ──────────────────────────────────────────────────────────────
   The 1px underline is reproduced with the original gradient technique so
   it sits exactly where Readymag put it, independent of font metrics.
   -------------------------------------------------------------------- */
.link {
  text-decoration: none;
  padding-bottom: 1px;
}

/* link-style-43fbc03b… — e-mail + portfolio. Underlined at rest. */
.link--light {
  color: var(--white);
  background: linear-gradient(to right, var(--white) 0%, var(--white) 100%) 0 100% / 1px 1px repeat-x;
}
.link--light:hover { color: rgba(255, 255, 255, 0.8); }

/* link-style-07487737… — Privacy Policy. Underline appears on hover only. */
.link--gold {
  color: var(--gold);
  background: none;
}
.link--gold:hover {
  color: rgba(195, 170, 118, 0.8);
  background: linear-gradient(to right, var(--gold) 0%, var(--gold) 100%) 0 100% / 1px 1px repeat-x;
}

/* Keyboard focus — additive only, does not alter the resting art direction. */
.link:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 1px;
}
.link--light:focus-visible { outline-color: var(--white); }


/* ── About Us CTA ───────────────────────────────────────────────────────
   A restrained outlined action using the existing gold/white palette.
   It occupies the previously unused third column on desktop.
   -------------------------------------------------------------------- */
.about-slot {
  display: flex;
  align-items: flex-start;
}

.about-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 0 12px;
  border: 1px solid rgba(195, 170, 118, 0.72);
  border-radius: 999px;
  color: var(--gold);
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 10px;
  line-height: 1;
  letter-spacing: 0.01em;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}

.about-cta:visited {
  color: var(--gold);
}

.about-cta:hover {
  color: var(--white);
  border-color: var(--gold);
  background: rgba(195, 170, 118, 0.10);
}

.about-cta:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

/* ── Load animation ─────────────────────────────────────────────────────
   Source: a single Readymag animation group wrapping the logo, tagline,
   e-mail, three service labels and Privacy Policy — opacity 0 → 1, ease-in.
   The centre statement carries NO animation in the source and is left alone.
   -------------------------------------------------------------------- */
.js .reveal { opacity: 0; }

.js.is-loaded .reveal {
  animation: reveal var(--reveal-duration) var(--reveal-ease) both;
}

@keyframes reveal {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ══════════════════════════════════════════════════════════════════════
   PHONE  (< 768px)

   A separate, deliberately designed composition — not a reflow of the
   desktop. Measured off the live phone layout, which Readymag draws on a
   360px base and scales up to the device width.

   Everything below is expressed in those 360-base design units, multiplied
   by --u. At a 360px viewport --u = 1px and the numbers are literal; at
   390px the whole composition scales by 1.083 exactly as the original does.

   Design map (360-base units, y measured from the top of the page):
     gutters      25 | columns 142.5 / 167.5 | right column starts at x=167.5
     logo         51 wide, upper-left,  y  20
     tagline      12/14, two lines,     y  20  (right column)
     e-mail       12/14, one line,      y 174  (right column)
     statement    48/45, four lines,    y 236.5 (full width, flush left)
     services     12/14, 28 tall, 29 apart, y 479.5 / 536.5 / 593.5 (right column)
     Privacy      8/14, lower-left, baseline-aligned with the last service
     page height  662.5
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  :root {
    /* 1 design unit. Caps at 1.2 so the composition stops growing at 432px
       and simply centres for the rest of the range. */
    --u: min(1.2px, calc(100vw / 360));
    --m-width: calc(360 * var(--u));
  }

  .stage {
    align-items: flex-start;   /* auto margins below do the centring safely */
    padding: 0;
    min-height: 100svh;
  }

  .canvas {
    width: var(--m-width);
    max-width: 100%;
    margin: auto;              /* centres when it fits, scrolls when it doesn't */
    padding: calc(20 * var(--u)) calc(25 * var(--u)) calc(41 * var(--u));
  }

  .row {
    grid-template-columns: 142.5fr 167.5fr;
  }

  /* ── Top: logo left, tagline right, e-mail dropped far below ───────── */
  .row--head { align-items: start; row-gap: calc(126 * var(--u)); }
  .row--head .col--1 { grid-column: 1; grid-row: 1; }   /* logo     */
  .row--head .col--2 { grid-column: 2; grid-row: 1; }   /* tagline  */
  .row--head .col--3 { grid-column: 1; grid-row: 2; }   /* About Us */
  .row--head .col--4 { grid-column: 2; grid-row: 2; }   /* e-mail   */


  .about-cta {
    min-height: calc(26 * var(--u));
    padding: 0 calc(10 * var(--u));
    font-size: calc(9 * var(--u));
  }

  .brand__mark {
    width: calc(51 * var(--u));
    height: auto;
    margin-left: 0;
  }

  /* ── Statement: flush left, full width, four forced lines ──────────── */
  .headline {
    margin-left: 0;
    margin-top: calc(48.5 * var(--u));
    font-size: calc(48 * var(--u));
    line-height: calc(45 * var(--u));
  }
  .br-m { display: inline; }

  /* ── Bottom: Privacy lower-left, services stacked right ────────────── */
  .row--foot {
    margin-top: calc(63 * var(--u));
    row-gap: calc(29 * var(--u));
  }
  .row--foot .col--2 { grid-column: 2; grid-row: 1; }   /* Strategy & Design   */
  .row--foot .col--3 { grid-column: 2; grid-row: 2; }   /* Design & Developm.  */
  .row--foot .col--4 { grid-column: 2; grid-row: 3; }   /* Design & Production */
  .row--foot .col--1 { grid-column: 1; grid-row: 3; }   /* Privacy Policy      */

  /* Type scales with the composition, as it does in the original. */
  .micro {
    font-size: calc(12 * var(--u));
    line-height: calc(14 * var(--u));
    min-height: 0;             /* the e-mail is a single line here */
  }
  .legal {
    font-size: calc(8 * var(--u));
    line-height: calc(14 * var(--u));
  }
}

/* ── Short desktop viewports: scroll rather than clip ───────────────── */
@media (min-width: 768px) and (max-height: 620px) {
  .stage { align-items: flex-start; padding-top: 48px; padding-bottom: 48px; }
}

/* ── Reduced motion ─────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .js .reveal,
  .js.is-loaded .reveal {
    animation: none !important;
    opacity: 1 !important;
  }
}