/* ==========================================================================
   areas.css — the shared base for the area pages (web-design-<area>.html).
   Added 3 November 2026 by tools/areas/build.py. Each page also carries its
   own skill's <style> block; this file holds only what every skill shares:
   the container, the byline, the buttons, the reveal states, the way back.

   TOKENS: nothing new. Navy #16213e / #0a1930, gold #d4a84b, Playfair and
   Montserrat, the 0.22,1,0.36,1 easing: all already on the site. Each page's
   own accent and surfaces arrive as --ar-* custom properties on <main>.

   MOTION: CSS only. Start states live under html.ar-js so that with
   JavaScript off, or if the observer never fires (the head script removes
   ar-js after 4 s), everything is simply there. motion-guard.css, linked
   last, collapses the transitions for prefers-reduced-motion.
   ========================================================================== */

.ar-page { background: var(--ar-surface, #FBF7F0); }
.ar-main {
  --ar-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ar-gold: #d4a84b;
  --ar-navy: #16213e;
  --ar-navy-deep: #0a1930;
  font-family: 'Montserrat', 'Montserrat Fallback', system-ui, sans-serif;
  color: var(--ar-ink, #1F2937);
  background: var(--ar-surface, #FBF7F0);
  padding-top: var(--edc-nav-shift, 0px);
  overflow-x: clip;
}
.ar-main h1, .ar-main h2, .ar-main h3, .ar-main .ar-serif {
  font-family: 'Playfair Display', 'Playfair Display Fallback', Georgia, serif;
  line-height: 1.12;
  letter-spacing: -0.01em;
}
.ar-main h1 { font-size: clamp(2.1rem, 1.2rem + 3.6vw, 4.4rem); font-weight: 700; margin: 0 0 1rem; }
.ar-main h2 { font-size: clamp(1.6rem, 1.1rem + 1.8vw, 2.6rem); font-weight: 700; margin: 0 0 1rem; }
.ar-main h3 { font-size: 1.25rem; font-weight: 700; margin: 0 0 .5rem; }
.ar-main p, .ar-main li { line-height: 1.7; }
.ar-main a { color: inherit; }

.ar-wrap { width: min(1140px, 100% - 2rem); margin-inline: auto; }
.ar-wrap--narrow { width: min(820px, 100% - 2rem); margin-inline: auto; }
.ar-section { padding: clamp(3rem, 6vw, 6rem) 0; }

.ar-kicker {
  font-family: 'Montserrat', 'Montserrat Fallback', system-ui, sans-serif;
  font-size: .78rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: var(--ar-accent, #d4a84b); margin: 0 0 .9rem;
}
.ar-byline { font-size: .92rem; opacity: .8; margin: 1rem 0 0; }
.ar-byline a { text-decoration: underline; text-underline-offset: 3px; }

.ar-btn {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .9rem 1.5rem; border-radius: 999px; font-weight: 700; font-size: .95rem;
  background: var(--ar-accent, #d4a84b); color: var(--ar-btn-ink, #fff);
  text-decoration: none; border: 2px solid var(--ar-accent, #d4a84b);
  transition: transform .3s var(--ar-ease), box-shadow .3s var(--ar-ease);
}
/* a.ar-btn outranks `.ar-main a { color: inherit }`: without it the button text took the page ink
   and five tranche-1 pages shipped a dark label on a dark button (found 3 Nov, fixed in v2). */
.ar-main a.ar-btn { color: var(--ar-btn-ink, #fff); }
.ar-main a.ar-btn--ghost, .ar-btn--ghost { background: transparent; color: inherit; border-color: currentColor; }
.ar-btn:focus-visible, .ar-main a:focus-visible, .ar-main summary:focus-visible, .ar-main label:focus-within {
  outline: 3px solid var(--ar-accent, #d4a84b); outline-offset: 3px;
}
@media (hover: hover) and (pointer: fine) {
  .ar-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 24px -14px rgba(0,0,0,.45); }
}

/* SplitText words stay on one line each; the runtime masks the characters. */
.ar-w { display: inline-block; white-space: nowrap; }
.ar-main canvas.ar-canvas { display: block; width: 100%; height: 100%; }

/* Reveals: once, on first scroll into view. */
html.ar-js .ar-rv { opacity: 0; transform: translateY(18px); transition: opacity .9s var(--ar-ease), transform .9s var(--ar-ease); }
html.ar-js .ar-rv.ar-in { opacity: 1; transform: none; }
html.ar-js .ar-rv--2 { transition-delay: .12s; }
html.ar-js .ar-rv--3 { transition-delay: .24s; }
html.ar-js .ar-rv--4 { transition-delay: .36s; }

/* FAQ: the question is an <h3> inside the <summary> (a question heading for answer
   engines, 3 Nov 2026); it takes the summary's own type, not the heading scale. */
.ar-main summary h3 { font: inherit; letter-spacing: inherit; line-height: inherit; margin: 0; display: inline; }

/* Prices: every skill renders its own table, but a price is always a <data>. */
.ar-main data { font-variant-numeric: tabular-nums; }

/* The way back: present on every page, under the last section. */
.ar-back { border-top: 1px solid var(--ar-line, rgba(0,0,0,.12)); padding: 1.6rem 0; font-size: .92rem; }
.ar-back ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; }
.ar-back a { text-decoration: underline; text-underline-offset: 3px; }

/* The demo note: the design is borrowed from a concept site with a fictional brand. */
.ar-demo-note { font-size: .85rem; opacity: .75; }

.ar-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (max-width: 640px) {
  .ar-section { padding: 2.6rem 0; }
}

/* Figures: generated images (AI, and each figure says so). The runtime opens them
   from a clipped edge and drifts them with the scroll; still without motion. */
.ar-fig { margin: 0; position: relative; overflow: hidden; background: var(--ar-surface2, rgba(0,0,0,.06)); }
.ar-fig img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ar-fig figcaption { position: absolute; left: .9rem; bottom: .8rem; font-size: .6rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 600; color: #fff; mix-blend-mode: difference; }
.ar-fig-wide { aspect-ratio: 16 / 7; }
.ar-fig-wide img, .ar-fig-side img { height: 118%; }
.ar-fig-side { aspect-ratio: 4 / 3; }
.ar-diptych { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
@media (max-width: 760px) { .ar-fig-wide { aspect-ratio: 4 / 3; } .ar-diptych { grid-template-columns: 1fr; } }