/* =============================================================================
   Otların Savaşı – Oyun Geliştirici Portföyü · css/style.css
   Editorial / magazine grid · 0px corners · near-monochrome green · LTR (tr)

   SHARED MARKUP CONTRACT (all pages must follow this DOM + class naming)
   -----------------------------------------------------------------------------
   <html lang="tr" class="no-js">   JS removes "no-js". Without JS the nav is shown expanded.
   <body class="page page--home">   body.is-locked => scroll lock while mobile nav is open.

   <a class="skip-link" href="#main">Ana içeriğe geç</a>

   <header class="site-header" data-header>            .is-scrolled added by JS after scroll > 8px
     <div class="container site-header__inner">
       <a class="brand" href="index.php"><span class="brand__mark" aria-hidden="true"></span><span class="brand__name">Marka</span></a>
       <button class="nav-toggle" type="button" data-nav-toggle aria-expanded="false" aria-controls="site-nav">
         <span class="nav-toggle__bar"></span><span class="nav-toggle__bar"></span><span class="nav-toggle__bar"></span>
         <span class="visually-hidden">Menü</span></button>
       <nav class="site-nav" id="site-nav" data-nav aria-label="Ana menü">   OPEN STATE: .site-nav.is-open
         <ul class="site-nav__list"><li><a class="site-nav__link" data-nav-link href="#yetenekler">…</a></li>…</ul>
         <a class="btn btn--primary btn--sm site-nav__cta" data-cta="primary" href="game.php">Oyunu Oyna</a>
       </nav>                                           ACTIVE LINK: .is-active + aria-current="true"
     </div>
   </header>
   Toggle open state: [data-nav-toggle][aria-expanded="true"] (JS also toggles .is-open on [data-nav]).

   <main id="main">
     <section class="hero" id="hero" aria-labelledby="hero-title">
       <div class="hero__bg" aria-hidden="true"></div>
       <div class="container hero__inner">
         <figure class="hero__visual"><img class="hero__graphic" src="img/hero-graphic.jpg" alt="…" width="1024" height="1024"></figure>
         <div class="hero__copy">
           <p class="eyebrow">…</p>
           <h1 class="hero__title" id="hero-title">… <em>…</em> …</h1>      (<strong> = bold, <em> = italic accent)
           <p class="hero__lead">…</p>
           <div class="hero__actions">
             <a class="btn btn--primary btn--xl" data-cta="primary" href="game.php">Oyunu Oyna</a>
             <a class="btn btn--ghost" href="#ekibe-katil">Ekibe Katıl</a>
           </div>
         </div>
       </div>
     </section>

     <section class="skills" id="yetenekler" aria-labelledby="skills-title">
       <div class="container">
         <header class="section-head">
           <div class="section-head__meta"><span class="section-head__num">01</span><p class="eyebrow">…</p></div>
           <div class="section-head__body"><h2 class="section-title" id="skills-title">…</h2><p class="section-lead">…</p></div>
         </header>
         <ul class="skills__grid"><li class="skill-card"><span class="skill-card__num">01</span>
           <h3 class="skill-card__title">…</h3><p class="skill-card__text">…</p></li> ×4</ul>
       </div>
     </section>

     <section class="featured-game" id="oyun" aria-labelledby="featured-title">
       <div class="container">
         <header class="section-head"> (same structure as above) </header>
         <article class="showcase">
           <figure class="showcase__media"><img class="showcase__img" src="img/product-1.jpg" alt="…" width="1024" height="1024" loading="lazy">
             <figcaption class="showcase__caption">…</figcaption></figure>
           <div class="showcase__body">
             <p class="showcase__tag">…</p><h3 class="showcase__title" id="featured-title">…</h3>
             <p class="showcase__text">…</p>
             <ul class="feature-list"><li class="feature-list__item">…</li> ×3</ul>
             <a class="btn btn--primary btn--xl" data-cta="primary" href="game.php">Oyun Sayfasına Git</a>
           </div>
         </article>
       </div>
     </section>

     <section class="join-team" id="ekibe-katil" aria-labelledby="join-title">
       <div class="container">
         <div class="join-card">
           <header class="join-card__head"><p class="eyebrow">…</p><h2 class="join-card__title" id="join-title">…</h2><p class="join-card__lead">…</p></header>
           <ul class="roles"><li class="role"><span class="role__num">01</span><h3 class="role__title">…</h3><p class="role__text">…</p></li> ×3</ul>
           <p class="join-card__note" role="note"><span class="join-card__dot" aria-hidden="true"></span>İletişim yöntemi çok yakında duyurulacak.</p>
         </div>
       </div>
     </section>
   </main>

   <footer class="site-footer">                         (minimal single row on desktop)
     <div class="container site-footer__inner">
       <div class="site-footer__brand"><a class="brand">…</a><p class="site-footer__tagline">…</p></div>
       <nav class="site-footer__nav" aria-label="Alt menü"><ul class="site-footer__list"><li><a class="site-footer__link" href="#yetenekler">…</a></li>…</ul></nav>
       <p class="site-footer__legal">© <span data-year>2025</span> …</p>
     </div>
   </footer>

   <section class="benefits" aria-label="Avantajlar">   (sibling AFTER the footer)
     <div class="container"><ul class="benefits__list">
       <li class="benefit"><span class="benefit__mark" aria-hidden="true"></span><h3 class="benefit__title">…</h3><p class="benefit__text">…</p></li> ×3-4
     </ul></div>
   </section>

   Primary CTA  : <a class="btn btn--primary [btn--xl|btn--sm]" data-cta="primary" href="game.php">  (JS must not touch it)
   Secondary    : .btn.btn--ghost (never data-cta="primary"). Pressed helper: .is-pressed. Disabled: [aria-disabled="true"].
   Surfaces     : .is-dark / .is-light utilities (sections already carry their own surface).
   Other components available site-wide (unused on index): .card, .masonry(__item, --tall, --wide, __caption),
     .prose (legal documents), forms: .form > .field > .field__label + .field__input + .field__hint/.field__error;
     states .is-invalid .is-valid on .field, .is-loading on .form, .form__status.is-success / .is-error; [hidden].
   Breakpoints  : base <360, ≥360, ≥768, ≥1200 (mobile-first).
   ============================================================================= */

/* ---------- Tokens ---------- */
:root {
  --ink: #0F1F17;
  --ink-2: #15291E;
  --ink-3: #1F3A2A;
  --green: #2ECC71;
  --green-edge: #1A8F4D;
  --green-deep: #11693A;
  --lime: #A3E635;
  --lime-edge: #6C9A14;
  --paper: #F5F7F2;
  --paper-2: #E7EDE2;
  --white: #FFFFFF;
  --sun: #FACC15; /* tiny accents only */

  --font-body: var(--mrc-font-en), system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: var(--mrc-font-en-display, Georgia, "Iowan Old Style", "Palatino Linotype", "Times New Roman", serif);

  /* 8px baseline scale */
  --space-1: .5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 3rem;
  --space-6: 4rem;
  --space-7: 6rem;
  --space-8: 8rem;

  --radius: 0;
  --header-h: 4rem;
  --max: 74rem;
  --gutter: 1.25rem;
  --col-gap: 1rem;
  --section-y: clamp(4rem, 2.5rem + 6vw, 8rem);

  --fs-body: 1rem;
  --fs-lead: clamp(1.0625rem, 1rem + .4vw, 1.3125rem);
  --fs-h1: clamp(2.25rem, 1.4rem + 4.2vw, 5.5rem);
  --fs-h2: clamp(2rem, 1.3rem + 3vw, 3.75rem);
  --fs-h3: clamp(1.375rem, 1.2rem + .8vw, 1.75rem);

  --focus: var(--ink);
}

/* ---------- Surfaces (custom-property driven) ---------- */
.is-dark, .site-header, .site-footer, .hero, .featured-game, .join-card {
  --bg: var(--ink);
  --fg: var(--paper);
  --muted: rgba(245, 247, 242, .76);
  --line: rgba(245, 247, 242, .2);
  --card: var(--ink-2);
  --accent-text: var(--lime);
  --focus: var(--lime);
  background-color: var(--bg);
  color: var(--fg);
}
.is-light, .skills, .join-team, .benefits {
  --bg: var(--paper);
  --fg: var(--ink);
  --muted: #3F5246;
  --line: rgba(15, 31, 23, .22);
  --card: var(--white);
  --accent-text: var(--green-deep);
  --focus: var(--ink);
  background-color: var(--bg);
  color: var(--fg);
}
.benefits { --bg: var(--paper-2); }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1rem);
}
body {
  margin: 0;
  min-width: 320px;
  max-width: 100%;
  overflow-x: clip;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--ink);
  background: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body.is-locked { overflow: hidden; }
img, picture, svg { display: block; max-width: 100%; height: auto; }
h1, h2, h3, h4 { margin: 0; font-family: var(--font-display); line-height: 1.1; overflow-wrap: break-word; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; }
a { color: inherit; text-underline-offset: .2em; }
::selection { background: var(--lime); color: var(--ink); }
[hidden] { display: none !important; }

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

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: var(--gutter); top: 0; z-index: 100;
  padding: .75rem 1rem; background: var(--lime); color: var(--ink); font-weight: 700;
  transform: translateY(-120%);
}
.skip-link:focus { transform: translateY(.5rem); }

.container {
  width: 100%;
  max-width: calc(var(--max) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ---------- Type helpers ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: .75rem;
  font: 700 .75rem/1.4 var(--font-body);
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--accent-text);
}
.eyebrow::before { content: ""; width: 2rem; height: 2px; background: currentColor; flex: none; }

.section-title { font-size: var(--fs-h2); font-weight: 400; letter-spacing: -.01em; }
.section-title strong { font-weight: 700; }
.section-title em, .hero__title em { font-style: italic; color: var(--accent-text); }
.section-lead { margin-top: var(--space-2); max-width: 38rem; font-size: var(--fs-lead); color: var(--muted); }

/* ---------- Buttons ---------- */
.btn {
  --btn-depth: 6px;
  --btn-edge: var(--green-edge);
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 3rem; padding: .8rem 1.5rem;
  font: 700 1rem/1.15 var(--font-body); letter-spacing: .02em; text-align: center; text-decoration: none;
  border: 2px solid transparent; border-radius: var(--radius);
  cursor: pointer; transition: none; -webkit-tap-highlight-color: transparent;
}
.btn--primary {
  color: var(--ink); background: var(--green); border-color: var(--ink);
  box-shadow: 0 var(--btn-depth) 0 var(--btn-edge), 0 14px 22px -8px rgba(0, 0, 0, .5), inset 0 2px 0 rgba(255, 255, 255, .4);
}
.btn--primary:hover {
  --btn-edge: var(--lime-edge);
  background: var(--lime);
  transform: translateY(-1px);
}
.btn--primary:active, .btn--primary.is-pressed {
  transform: translateY(calc(var(--btn-depth) - 1px));
  box-shadow: 0 1px 0 var(--btn-edge), inset 0 3px 0 rgba(0, 0, 0, .14);
}
.btn--ghost { color: var(--fg, var(--paper)); border-color: currentColor; background: transparent; }
.btn--ghost:hover { background: var(--fg, var(--paper)); color: var(--bg, var(--ink)); }
.btn--ghost:active, .btn--ghost.is-pressed { transform: translateY(2px); }
.btn--sm { --btn-depth: 3px; min-height: 2.75rem; padding: .5rem 1.1rem; font-size: .9375rem; }
.btn--xl {
  --btn-depth: 8px;
  min-height: 4.5rem; padding: 1.2rem clamp(2rem, 6vw, 3.5rem);
  font-family: var(--font-display); font-weight: 700; letter-spacing: -.005em;
  font-size: clamp(1.375rem, 1.1rem + 1.2vw, 1.875rem);
}
.btn[aria-disabled="true"], .btn:disabled { opacity: .55; pointer-events: none; }

/* ---------- Header / navigation ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  border-bottom: 1px solid var(--line);
}
.site-header.is-scrolled { box-shadow: 0 8px 24px -12px rgba(0, 0, 0, .6); }
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-2);
  min-height: var(--header-h);
}
.brand { display: inline-flex; align-items: center; gap: .625rem; min-height: 2.75rem; text-decoration: none; color: var(--fg, var(--paper)); }
.brand__mark { position: relative; width: 1.75rem; height: 1.75rem; background: var(--green); flex: none; }
.brand__mark::after { content: ""; position: absolute; top: -.2rem; right: -.2rem; width: .45rem; height: .45rem; background: var(--sun); }
.brand__name { font: 700 1.125rem/1.1 var(--font-display); letter-spacing: -.01em; }

.nav-toggle {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  width: 2.75rem; height: 2.75rem; padding: 0; color: var(--paper);
  background: transparent; border: 1px solid var(--line); border-radius: var(--radius); cursor: pointer;
}
.nav-toggle__bar { display: block; width: 1.25rem; height: 2px; background: currentColor; }
.nav-toggle[aria-expanded="true"] { background: var(--ink-3); border-color: var(--lime); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-of-type(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-of-type(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-of-type(3) { transform: translateY(-7px) rotate(-45deg); }

.site-nav {
  display: none; flex-direction: column; gap: var(--space-3);
  position: absolute; top: 100%; left: 0; right: 0;
  padding: var(--space-2) var(--gutter) var(--space-4);
  max-height: calc(100vh - var(--header-h)); max-height: calc(100svh - var(--header-h)); overflow-y: auto;
  background: var(--ink); border-bottom: 1px solid var(--line);
}
.site-nav.is-open { display: flex; animation: nav-in .18s ease-out; }
.site-nav__list { display: flex; flex-direction: column; list-style: none; }
.site-nav__link {
  display: flex; align-items: center; min-height: 3.25rem;
  font: 400 1.5rem/1.2 var(--font-display); text-decoration: none; color: var(--paper);
  border-bottom: 1px solid var(--line);
}
.site-nav__link:hover { color: var(--lime); }
.site-nav__link.is-active, .site-nav__link[aria-current] { color: var(--lime); font-style: italic; }
.site-nav__cta { width: 100%; }

@keyframes nav-in { from { opacity: 0; transform: translateY(-.5rem); } to { opacity: 1; transform: none; } }

/* no-JS fallback (mobile): menu always visible under the brand */
@media (max-width: 767px) {
  .no-js .nav-toggle { display: none; }
  .no-js .site-header__inner { flex-wrap: wrap; padding-block: var(--space-1); }
  .no-js .site-nav { display: flex; position: static; width: 100%; padding: 0 0 var(--space-2); max-height: none; border: 0; }
}

/* ---------- Hero (bottom-anchored copy over full-bleed visual) ---------- */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; align-items: end;
  min-height: calc(100vh - var(--header-h));
  min-height: calc(100svh - var(--header-h));
  padding-block: var(--space-4) var(--space-5);
}
.hero__bg {
  position: absolute; inset: 0; z-index: -1;
  background-color: var(--ink);
  background-image:
    linear-gradient(180deg, rgba(15, 31, 23, .3) 0%, rgba(15, 31, 23, .62) 45%, rgba(15, 31, 23, .97) 100%),
    url("../img/bg-mobile.jpg");
  background-size: cover; background-position: center;
}
.hero__inner { display: grid; gap: var(--space-4); align-items: end; }
.hero__visual {
  justify-self: end; width: clamp(10rem, 46vw, 15rem);
  margin: 0 .75rem 0 0;
  animation: hero-float 7s ease-in-out infinite;
}
.hero__graphic {
  width: 100%; aspect-ratio: 1 / 1; object-fit: cover;
  border: 2px solid var(--paper); box-shadow: .75rem .75rem 0 var(--lime);
}
.hero__copy { max-width: 46rem; }
.hero__copy .eyebrow { margin-bottom: var(--space-2); }
.hero__title { font-size: var(--fs-h1); font-weight: 400; letter-spacing: -.02em; line-height: 1.02; text-wrap: balance; }
.hero__title strong { font-weight: 700; }
.hero__lead { margin-top: var(--space-3); max-width: 34rem; font-size: var(--fs-lead); line-height: 1.55; color: rgba(245, 247, 242, .88); }
.hero__actions { display: flex; flex-direction: column; align-items: stretch; gap: 1.25rem; margin-top: var(--space-4); padding-bottom: .5rem; }

@keyframes hero-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-.75rem); } }

/* ---------- Sections: shared ---------- */
.skills, .featured-game, .join-team { padding-block: var(--section-y); }
.section-head { display: grid; gap: var(--space-2); margin-bottom: var(--space-5); }
.section-head__meta { display: flex; align-items: center; gap: var(--space-2); }
.section-head__num { font: italic 400 2.5rem/1 var(--font-display); color: var(--accent-text); }

/* ---------- Cards / skills ---------- */
.card, .skill-card {
  display: flex; flex-direction: column; gap: var(--space-2);
  padding: var(--space-3); background: var(--card);
  border: 1px solid var(--line); border-radius: var(--radius);
}
.skill-card { list-style: none; border-top: 4px solid var(--ink); transition: box-shadow .15s ease, transform .15s ease; }
.skill-card:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--green); }
.skill-card__num {
  display: inline-flex; align-items: center; gap: .5rem;
  font: 700 .75rem/1 var(--font-body); letter-spacing: .16em; color: var(--accent-text);
}
.skill-card__num::before { content: ""; width: .5rem; height: .5rem; background: var(--sun); }
.skill-card__title { font-size: var(--fs-h3); font-weight: 700; letter-spacing: -.01em; }
.skill-card__text { color: var(--muted); }
.skills__grid { display: grid; grid-template-columns: 1fr; gap: var(--space-3); list-style: none; }

/* ---------- Featured game showcase ---------- */
.featured-game { position: relative; isolation: isolate; overflow: hidden; }
.featured-game::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, var(--ink) 0%, rgba(15, 31, 23, .86) 35%, rgba(15, 31, 23, .95) 100%),
    url("../img/bg-mobile.jpg") center / cover no-repeat;
}
.showcase { display: grid; gap: var(--space-5); }
.showcase__media { margin: 0 .75rem .75rem 0; position: relative; }
.showcase__media::before {
  content: ""; position: absolute; inset: 0; transform: translate(.75rem, .75rem);
  border: 2px solid var(--lime);
}
.showcase__img { position: relative; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border: 2px solid var(--paper); background: var(--ink-2); }
.showcase__caption { position: relative; margin-top: var(--space-2); font-size: .8125rem; color: var(--muted); letter-spacing: .02em; }
.showcase__tag { display: inline-flex; align-items: center; gap: .5rem; font: 700 .75rem/1.4 var(--font-body); letter-spacing: .16em; text-transform: uppercase; color: var(--lime); }
.showcase__tag::before { content: ""; width: .5rem; height: .5rem; background: var(--sun); }
.showcase__title { margin-top: var(--space-2); font-size: var(--fs-h2); font-weight: 700; letter-spacing: -.02em; line-height: 1.05; }
.showcase__text { margin-top: var(--space-3); max-width: 38rem; font-size: 1.0625rem; color: var(--muted); }

.feature-list { list-style: none; counter-reset: feat; margin: var(--space-4) 0; border-top: 1px solid var(--line); }
.feature-list__item {
  counter-increment: feat; display: flex; align-items: baseline; gap: var(--space-2);
  padding: var(--space-2) 0; border-bottom: 1px solid var(--line); font-weight: 600;
}
.feature-list__item::before {
  content: counter(feat, decimal-leading-zero); min-width: 2rem;
  font: italic 400 1.125rem/1 var(--font-display); color: var(--accent-text);
}

/* ---------- Join team (elevated card in a contrasting section) ---------- */
.join-team {
  background-image: repeating-linear-gradient(90deg, rgba(15, 31, 23, .05) 0 1px, transparent 1px calc(100% / 6));
}
.join-card {
  max-width: 60rem; margin: 0 .75rem .75rem 0;
  padding: clamp(1.5rem, .75rem + 4vw, 4rem);
  border: 2px solid var(--ink); box-shadow: .75rem .75rem 0 var(--green);
}
.join-card__title { margin-top: var(--space-2); font-size: var(--fs-h2); font-weight: 400; letter-spacing: -.01em; }
.join-card__lead { margin-top: var(--space-2); max-width: 38rem; font-size: var(--fs-lead); color: var(--muted); }
.roles { list-style: none; display: grid; margin-top: var(--space-5); border-top: 1px solid var(--line); }
.role { padding: var(--space-3) 0; border-bottom: 1px solid var(--line); }
.role__num { display: block; font: italic 400 1.25rem/1 var(--font-display); color: var(--accent-text); }
.role__title { margin-top: var(--space-1); font-size: var(--fs-h3); font-weight: 700; }
.role__text { margin-top: var(--space-1); color: var(--muted); }
.join-card__note {
  display: flex; align-items: center; gap: .75rem; margin-top: var(--space-4); padding: var(--space-2);
  border: 1px dashed var(--lime); font-weight: 600;
}
.join-card__dot { flex: none; width: .625rem; height: .625rem; background: var(--sun); }

/* ---------- Footer (minimal single row) ---------- */
.site-footer { padding-block: var(--space-5); border-top: 1px solid var(--line); }
.site-footer__inner { display: flex; flex-direction: column; gap: var(--space-3); }
.site-footer__tagline { margin-top: var(--space-1); max-width: 24rem; font-size: .9375rem; color: var(--muted); }
.site-footer__list { display: flex; flex-wrap: wrap; gap: .25rem 1.5rem; list-style: none; }
.site-footer__link {
  display: inline-flex; align-items: center; min-height: 2.75rem;
  font: 700 .8125rem/1 var(--font-body); letter-spacing: .1em; text-transform: uppercase; text-decoration: none;
  border-bottom: 2px solid transparent;
}
.site-footer__link:hover { color: var(--lime); border-bottom-color: var(--lime); }
.site-footer__legal { font-size: .8125rem; color: var(--muted); }

/* ---------- Benefits strip ---------- */
.benefits { padding-block: var(--space-5); }
.benefits__list { display: grid; grid-template-columns: 1fr; gap: var(--space-3); list-style: none; }
.benefit { padding-top: var(--space-2); border-top: 2px solid var(--ink); }
.benefit__mark { display: block; width: .625rem; height: .625rem; margin-bottom: var(--space-1); background: var(--green); }
.benefit__title { font-size: 1.25rem; font-weight: 700; }
.benefit__text { margin-top: .25rem; font-size: .9375rem; color: var(--muted); }

/* ---------- Masonry gallery (shared component) ---------- */
.masonry { columns: 1; column-gap: var(--space-3); }
.masonry__item { break-inside: avoid; margin: 0 0 var(--space-3); }
.masonry__item img { width: 100%; object-fit: cover; }
.masonry__item--tall img { aspect-ratio: 3 / 4; }
.masonry__item--wide img { aspect-ratio: 4 / 3; }
.masonry__caption { margin-top: .5rem; font-size: .8125rem; color: var(--muted); }

/* ---------- Forms (shared; not used on index) ---------- */
.form { display: grid; gap: var(--space-3); }
.field { display: grid; gap: .5rem; }
.field__label { font-weight: 700; font-size: .875rem; letter-spacing: .04em; }
.field__input {
  width: 100%; min-height: 3rem; padding: .75rem 1rem;
  font: inherit; color: var(--ink); background: var(--white);
  border: 2px solid var(--ink); border-radius: var(--radius);
}
textarea.field__input { min-height: 8rem; resize: vertical; }
.field__input:focus-visible { outline: 3px solid var(--green); outline-offset: 2px; }
.field__hint { font-size: .8125rem; color: var(--muted); }
.field__error { display: none; font-size: .8125rem; font-weight: 700; color: #B42318; }
.field.is-invalid .field__input { border-color: #B42318; background: #FFF4F2; }
.field.is-invalid .field__error { display: block; }
.field.is-valid .field__input { border-color: var(--green-deep); }
.form.is-loading { opacity: .7; pointer-events: none; }
.form__status { padding: var(--space-2); border: 2px solid var(--ink); font-weight: 600; }
.form__status.is-success { border-color: var(--green-deep); background: #E6F7EC; }
.form__status.is-error { border-color: #B42318; background: #FFF4F2; }

/* ---------- Prose (legal / content documents) ---------- */
.prose { max-width: 42rem; margin-inline: auto; padding-block: var(--space-6); }
.prose h1 { font-size: var(--fs-h2); margin-bottom: var(--space-3); }
.prose h2 { font-size: var(--fs-h3); margin: var(--space-5) 0 var(--space-2); }
.prose h3 { font-size: 1.125rem; margin: var(--space-3) 0 var(--space-1); }
.prose p, .prose li { color: var(--muted); }
.prose p + p { margin-top: var(--space-2); }
.prose ul, .prose ol { padding-inline-start: 1.25rem; margin: var(--space-2) 0; }
.prose a { color: var(--accent-text); font-weight: 600; }

/* =============================================================================
   ≥360px
   ============================================================================= */
@media (min-width: 360px) {
  :root { --gutter: 1.5rem; }
  .hero__visual { width: clamp(11rem, 50vw, 16rem); }
}

/* =============================================================================
   ≥768px
   ============================================================================= */
@media (min-width: 768px) {
  :root { --gutter: 2rem; --col-gap: 1.5rem; --header-h: 4.5rem; }

  /* header / nav inline */
  .nav-toggle { display: none; }
  .site-nav, .site-nav.is-open {
    display: flex; flex-direction: row; align-items: center; gap: var(--space-4);
    position: static; padding: 0; max-height: none; overflow: visible; background: none; border: 0; animation: none;
  }
  .site-nav__list { flex-direction: row; gap: var(--space-3); }
  .site-nav__link {
    min-height: 2.75rem; font: 600 .9375rem/1 var(--font-body); border-bottom: 2px solid transparent;
  }
  .site-nav__link:hover { border-bottom-color: var(--green); }
  .site-nav__link.is-active, .site-nav__link[aria-current] { font-style: normal; border-bottom-color: var(--lime); }
  .site-nav__cta { width: auto; }

  /* hero */
  .hero { padding-block: var(--space-6); }
  .hero__bg {
    background-image:
      linear-gradient(90deg, rgba(15, 31, 23, .9) 0%, rgba(15, 31, 23, .5) 55%, rgba(15, 31, 23, .15) 100%),
      linear-gradient(0deg, rgba(15, 31, 23, .92) 0%, rgba(15, 31, 23, 0) 55%),
      url("../img/bg-desktop.jpg");
  }
  .hero__inner { grid-template-columns: repeat(12, 1fr); column-gap: var(--col-gap); }
  .hero__copy { grid-column: 1 / span 8; grid-row: 1; }
  .hero__visual { grid-column: 9 / -1; grid-row: 1; width: min(100%, 22rem); justify-self: end; align-self: end; margin-bottom: var(--space-5); }
  .hero__actions { flex-direction: row; align-items: center; flex-wrap: wrap; gap: var(--space-3); }

  /* section heads: magazine two-zone grid */
  .section-head { grid-template-columns: repeat(12, 1fr); column-gap: var(--col-gap); margin-bottom: var(--space-6); }
  .section-head__meta { grid-column: 1 / span 3; flex-direction: column; align-items: flex-start; gap: var(--space-1); }
  .section-head__body { grid-column: 4 / -1; }
  .section-head__num { font-size: 4rem; }

  /* skills: 2 cols, staggered tops */
  .skills__grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-4) var(--space-3); }
  .skill-card:nth-child(even) { margin-top: var(--space-5); }
  .skill-card { padding: var(--space-4) var(--space-3); min-height: 15rem; }

  /* showcase */
  .showcase { grid-template-columns: repeat(12, 1fr); column-gap: var(--col-gap); align-items: end; }
  .showcase__media { grid-column: 1 / span 6; }
  .showcase__body { grid-column: 7 / -1; padding-bottom: .75rem; }

  /* join */
  .join-card { margin: 0 auto 1.25rem; box-shadow: 1.25rem 1.25rem 0 var(--green); }
  .roles { grid-template-columns: repeat(3, 1fr); }
  .role { padding: var(--space-3) var(--space-3) var(--space-3) 0; border-bottom: 0; }
  .role + .role { padding-left: var(--space-3); border-left: 1px solid var(--line); }
  .roles { border-bottom: 1px solid var(--line); }

  /* footer: wraps to two rows here, single row at 1200 */
  .site-footer__inner { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3) var(--space-4); }

  /* benefits */
  .benefits__list { grid-template-columns: repeat(2, 1fr); gap: var(--space-4) var(--space-4); }

  /* gallery */
  .masonry { columns: 2; }
}

/* =============================================================================
   ≥1200px
   ============================================================================= */
@media (min-width: 1200px) {
  :root { --gutter: 3rem; --col-gap: 2rem; --header-h: 5rem; }
  .site-nav__list { gap: var(--space-4); }

  .hero__copy { grid-column: 1 / span 7; }
  .hero__visual { grid-column: 8 / -1; width: min(100%, 27rem); margin-bottom: var(--space-6); }

  .skills__grid { grid-template-columns: repeat(4, 1fr); gap: var(--space-3); }
  .skill-card { padding: var(--space-4) var(--space-3); min-height: 18rem; }
  .skill-card:nth-child(even) { margin-top: var(--space-6); }

  .showcase__media { grid-column: 1 / span 7; }
  .showcase__body { grid-column: 8 / -1; }

  .site-footer__inner { flex-wrap: nowrap; }
  .site-footer__nav { margin-inline: auto; }

  .benefits__list { grid-template-columns: repeat(4, 1fr); gap: var(--space-4); }
  .masonry { columns: 3; }
}

/* =============================================================================
   Reduced motion
   ============================================================================= */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
  .hero__visual { transform: none; }
  .skill-card:hover { transform: none; }
}