/* ==========================================================================
   La Mia Lingua - Italian with Giulia
   Static CSS, no build step, no framework.

   DESIGN SYSTEM
   Style ........ Swiss / international. Big grotesque display, tiny mono meta,
                  hairline rules, no cards, generous negative space.
   Accent lock .. one accent (--accent, deep olive) used ONLY for links, focus
                  rings and hover marks. Nowhere else.
   Shape lock ... interactive elements are full-pill. Everything structural is
                  sharp (radius 0). No in-between radii anywhere.
   Theme ........ LIGHT ONLY. There is deliberately no dark mode and no
                  prefers-color-scheme block. Do not add one back without
                  asking: every token below assumes dark ink on light paper.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root {
  /* Neutral warm-grey paper. --bg-sunk sits a deliberate step below --bg so
     alternating sections read as distinct planes rather than one continuous
     sheet, and --bg-frame sits between the two for photo placeholders.

     Do not lighten --ink-2 or --ink-3. Every ink clears WCAG AA (4.5:1)
     against all three backgrounds; the tightest pair is --ink-3 on --bg-sunk
     at 5.75:1. The meta text gets its quietness from being mono, uppercase,
     12px and wide-tracked, not from being pale. */
  --bg:        #e9e9e6;
  --bg-sunk:   #d6d6d1;
  --bg-frame:  #e1e1dc;
  --ink:       #0f0f0d;
  --ink-2:     #3a3a34;
  --ink-3:     #4e4e47;
  --rule:      rgba(15, 15, 13, 0.18);
  --rule-soft: rgba(15, 15, 13, 0.09);
  /* A touch stronger than --rule: a keyline around a photograph has to hold
     its own against the image, where a divider between text does not. */
  --frame-line: rgba(15, 15, 13, 0.28);
  --accent:    #3f5133;
  --btn-bg:    #0f0f0d;
  --btn-fg:    #e9e9e6;

  /* Flag mark only. The brick appears here and nowhere else on the site. */
  --flag-green: #3f5133;
  --flag-pale:  #e9e9e6;
  --flag-brick: #8c3b32;

  /* Type */
  --font-display: "Schibsted Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Tuned against Schibsted Grotesk, which sets wide. Raising this pushes the
     hero headline into a third line and crowds the portrait beside it. */
  --step-display: clamp(2.75rem, 7.2vw, 6.5rem);
  --step-section: clamp(2.1rem, 5.4vw, 4.1rem);
  --step-row:     clamp(1.6rem, 3.8vw, 2.9rem);
  --step-lead:    clamp(1.0625rem, 1.35vw, 1.25rem);
  --step-body:    1rem;
  --step-meta:    0.75rem;

  /* Space */
  --gutter: clamp(1.25rem, 4.5vw, 4.5rem);
  --section-pad: clamp(4.5rem, 11vh, 9rem);
  --shell: 1440px;

  /* Motion */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --fast: 180ms;
  --slow: 420ms;
}

/* --------------------------------------------------------------------------
   2. Reset + base
   -------------------------------------------------------------------------- */

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

html {
  /* Light only. Stops the browser rendering scrollbars and form controls in
     dark chrome for visitors whose OS is set to dark. */
  color-scheme: light;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: var(--step-body);
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, figure, blockquote { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

a {
  color: inherit;
  text-decoration: none;
}

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

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

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

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   3. Type roles
   -------------------------------------------------------------------------- */

/* balance stops short headlines stranding a single word on the last line,
   e.g. "Learn Italian with / me". */
.t-display {
  font-size: var(--step-display);
  font-weight: 500;
  line-height: 0.9;
  letter-spacing: -0.05em;
  max-width: 15ch;
  text-wrap: balance;
}

.t-section {
  font-size: var(--step-section);
  font-weight: 500;
  line-height: 0.95;
  letter-spacing: -0.035em;
  max-width: 18ch;
  text-wrap: balance;
}

.t-row {
  font-size: var(--step-row);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.03em;
}

.t-lead {
  font-size: var(--step-lead);
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 46ch;
}

/* Carries a whole section on its own, so it sits above .t-lead and stays in
   full-strength ink rather than the muted body colour. */
.t-statement {
  font-size: clamp(1.3rem, 2.3vw, 1.85rem);
  line-height: 1.35;
  letter-spacing: -0.02em;
  color: var(--ink);
  max-width: 44ch;
}

.t-body {
  color: var(--ink-2);
  max-width: 62ch;
}

/* Sits under the .t-statement opener on the homepage: same measure, stepped
   down so the two paragraphs read as headline then detail. */
.offer__detail {
  margin-top: 1.5rem;
  max-width: 58ch;
}

.t-meta {
  font-family: var(--font-mono);
  font-size: var(--step-meta);
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  line-height: 1.4;
}

.t-num {
  font-family: var(--font-mono);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}


/* --------------------------------------------------------------------------
   4. Header + nav
   -------------------------------------------------------------------------- */

.masthead {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--bg);
  border-bottom: 1px solid var(--rule-soft);
}

.masthead__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  height: 68px;
}

/* Two-part lockup: the name carries the weight, the descriptor sits back in
   the muted ink. Split rather than one long string so it can drop the
   descriptor to a second line on narrow screens instead of colliding with the
   Contact me button. */
.brand {
  display: inline-flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0 0.45rem;
  font-size: 0.9375rem;
  letter-spacing: -0.02em;
  line-height: 1.25;
}

.brand .brandmark { align-self: center; }

.brand__name {
  font-weight: 500;
  white-space: nowrap;
}

.brand__rest {
  font-weight: 400;
  color: var(--ink-3);
  white-space: nowrap;
}

.brand__rest::before {
  content: "- ";
}

/* Three bars in tones that belong to the palette rather than the literal
   tricolour, so the mark sits inside the system instead of shouting next to
   it. Swap the two fills below for #008C45 and #CD212A for the true flag. */
.brandmark {
  width: 18px;
  height: 12px;
  flex: none;
  border: 1px solid var(--rule);
}

.nav {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.2vw, 2.25rem);
}

.nav__link {
  position: relative;
  font-family: var(--font-mono);
  font-size: var(--step-meta);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-2);
  padding-block: 0.5rem;
  transition: color var(--fast) var(--ease);
}

.nav__link:hover { color: var(--ink); }
.nav__link[aria-current="page"] { color: var(--ink); }

/* The only accent on the page that shows without interaction, so colour is
   present on every page from load rather than only on hover. */
.nav__link[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.15rem;
  height: 1px;
  background: var(--accent);
}

.masthead__right {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2vw, 2rem);
}


/* Mobile: nav drops to its own hairline row so the bar stays one line. */
.navrow { display: none; }

@media (max-width: 760px) {
  .masthead__bar { height: 58px; }
  .masthead__bar .nav { display: none; }

  .navrow {
    display: block;
    border-top: 1px solid var(--rule-soft);
  }
  .navrow .nav {
    justify-content: space-between;
    gap: 0.5rem;
    height: 42px;
  }
}

/* --------------------------------------------------------------------------
   6. Button (the one interactive shape: full pill)
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: var(--step-meta);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--btn-fg);
  background: var(--btn-bg);
  border: 1px solid var(--btn-bg);
  border-radius: 999px;
  padding: 0.85rem 1.4rem;
  cursor: pointer;
  transition: transform var(--fast) var(--ease), opacity var(--fast) var(--ease);
}

.btn:hover { opacity: 0.86; }
.btn:active { transform: translateY(1px); }

.btn__arrow {
  width: 14px;
  height: 14px;
  flex: none;
  transition: transform var(--slow) var(--ease);
}

.btn:hover .btn__arrow { transform: translateX(3px); }

.btn--ghost {
  color: var(--ink);
  background: none;
  border-color: var(--rule);
}

.btn--ghost:hover { border-color: var(--ink); opacity: 1; }

.btn--sm { padding: 0.6rem 1.05rem; }

/* --------------------------------------------------------------------------
   7. Section scaffold
   -------------------------------------------------------------------------- */

.section {
  padding-block: var(--section-pad);
  border-top: 1px solid var(--rule-soft);
}

.section--flush { border-top: 0; }
.section--sunk { background: var(--bg-sunk); }

.section__head {
  margin-bottom: clamp(2.5rem, 6vh, 4.5rem);
}

.grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(1.25rem, 2.5vw, 2rem);
}

/* --------------------------------------------------------------------------
   8. Hero
   -------------------------------------------------------------------------- */

.hero {
  padding-top: clamp(2.25rem, 6vh, 4rem);
  padding-bottom: var(--section-pad);
}

.hero__title { max-width: 13ch; }

/* An explicit line break in a display heading. Used where the wording is a
   fixed two-line lockup rather than a sentence left to wrap, so the break
   never moves with the viewport. */
.t-display .line,
.t-section .line { display: block; }

/* The homepage H1 is a set two-line lockup, so it needs its own measure
   rather than the 13ch that suits a wrapping sentence. */
.hero__title:has(.line) { max-width: none; }

/* Homepage only: text column and portrait sit side by side from the first
   row, so the headline stays large while the button stays above the fold. */
.hero--split .grid { align-items: start; }

.hero__copy { grid-column: 1 / span 8; }

.hero__lead { margin-top: clamp(1.5rem, 4vh, 2.75rem); }

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: clamp(1.5rem, 3.5vh, 2.25rem);
}

.hero__figure { grid-column: 9 / span 4; }

/* Photo credit, set right under the photo it belongs to rather than
   travelling all the way down to the footer. Right-aligned to match the
   frame above it. */
.hero__credit { margin-top: 0.75rem; text-align: right; }

@media (max-width: 900px) {
  .hero__copy { grid-column: 1 / -1; }
  .hero__figure { grid-column: 1 / -1; margin-top: 2.5rem; max-width: 340px; }
}

/* --------------------------------------------------------------------------
   9. Photo frame

   No invented portrait is shipped. Each slot states the crop and pixel size
   the real photograph has to be dropped into.
   -------------------------------------------------------------------------- */

/* A hairline with a small mat of page colour between it and the image, so the
   photograph reads as mounted on the page rather than pasted over it. Keep the
   mat tight: more than a few pixels and it stops being a keyline and starts
   looking like a picture frame. */
.frame {
  position: relative;
  display: grid;
  place-items: center;
  padding: 5px;
  background: var(--bg);
  border: 1px solid var(--frame-line);
  overflow: hidden;
}

.frame > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Narrower than its grid column on purpose, so it can be centred rather than
   stretched edge to edge, then nudged off-centre toward the left. */
.frame--portrait {
  aspect-ratio: 4 / 5;
  max-width: 400px;
  margin-inline: auto;
  transform: translateX(-1rem);
}
.frame--wide { aspect-ratio: 3 / 2; }
.frame--hero { aspect-ratio: 4 / 5; max-height: min(48vh, 420px); width: auto; margin-left: auto; }

.frame__slot {
  text-align: center;
  padding: 1.5rem;
}

.frame__slot span {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.frame__slot span + span { margin-top: 0.5rem; }

.frame__mark {
  width: 26px;
  height: 26px;
  margin: 0 auto 0.9rem;
  color: var(--ink-3);
}

/* --------------------------------------------------------------------------
   10. Index row

   The one repeating unit on this site. Used for services, prices, and contact
   channels. Big name on the left, real meta right-aligned in mono. The meta is
   always information the visitor needs (a price, a length, an address), never
   a counter or a decorative number.
   -------------------------------------------------------------------------- */

.rows {
  border-top: 1px solid var(--rule);
}

.row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 1.5rem clamp(1.5rem, 4vw, 4rem);
  padding-block: clamp(1.75rem, 3.6vh, 2.75rem);
  border-bottom: 1px solid var(--rule);
}

.row__main { min-width: 0; }

.row__title {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  transition: transform var(--slow) var(--ease);
}

.row__desc {
  margin-top: 0.75rem;
  color: var(--ink-2);
  max-width: 52ch;
}

.row__meta {
  text-align: right;
  white-space: nowrap;
}


.row__price {
  font-family: var(--font-mono);
  font-size: clamp(1.1rem, 2vw, 1.5rem);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

.row__unit {
  display: block;
  margin-top: 0.35rem;
  font-family: var(--font-mono);
  font-size: var(--step-meta);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
}

a.row:hover .row__title { transform: translateX(6px); }
a.row:hover .row__arrow { opacity: 1; transform: translateX(0); }

.row__arrow {
  width: 20px;
  height: 20px;
  flex: none;
  opacity: 0;
  color: var(--accent);
  transform: translateX(-8px);
  transition: opacity var(--slow) var(--ease), transform var(--slow) var(--ease);
}

@media (max-width: 620px) {
  .row {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  .row__meta { text-align: left; }
}

/* --------------------------------------------------------------------------
   11. Trust strip (About page)
   -------------------------------------------------------------------------- */

.facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--rule);
  border-block: 1px solid var(--rule);
}

/* Column layout with the label pushed to the bottom, so labels stay on a
   shared baseline even when one tile value wraps to two lines. */
.fact {
  display: flex;
  flex-direction: column;
  background: var(--bg);
  padding: clamp(1.5rem, 3vw, 2.25rem) clamp(1rem, 2vw, 1.75rem);
}

/* Sized so the longest tile value ("My background") still sets on one line at
   desktop, which keeps the four labels beneath it on a shared baseline. */
.fact__value {
  font-size: clamp(1.6rem, 2.6vw, 2.2rem);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

/* A tile carrying a sentence rather than a couple of words needs the room of
   two. Keeps the strip at four columns of content in three tiles. */
.fact--wide { grid-column: span 2; }

.fact__label {
  margin-top: auto;
  padding-top: 0.75rem;
  font-family: var(--font-mono);
  font-size: var(--step-meta);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
}

@media (max-width: 860px) {
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --------------------------------------------------------------------------
   12. Bio split (About page)
   -------------------------------------------------------------------------- */

.bio__figure { grid-column: 1 / span 5; }
.bio__copy { grid-column: 7 / span 6; }

.bio__copy > * + * { margin-top: 1.25rem; }

@media (max-width: 900px) {
  .bio__figure { grid-column: 1 / -1; max-width: 380px; margin-inline: auto; }
  .bio__copy { grid-column: 1 / -1; margin-top: 2.5rem; }
}

/* --------------------------------------------------------------------------
   13. Testimonials
   -------------------------------------------------------------------------- */

.quotes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 3rem);
}

.quote {
  border-top: 1px solid var(--rule);
  padding-top: 1.5rem;
}

.quote__text {
  font-size: clamp(1.0625rem, 1.5vw, 1.3rem);
  line-height: 1.45;
  letter-spacing: -0.015em;
  color: var(--ink);
}

.quote__by {
  margin-top: 1.25rem;
  font-family: var(--font-mono);
  font-size: var(--step-meta);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* A lone testimonial is featured rather than left sitting in a third of the
   row. Larger type, but held to a readable measure so it does not run the
   full width of the page. */
.quotes--one { grid-template-columns: minmax(0, 1fr); }

.quotes--one .quote { max-width: 46ch; }

.quotes--one .quote__text {
  font-size: clamp(1.15rem, 1.9vw, 1.6rem);
  line-height: 1.4;
}

@media (max-width: 880px) {
  .quotes { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   14. FAQ (native details, no JS)
   -------------------------------------------------------------------------- */

.faq { border-top: 1px solid var(--rule); }

.faq__item { border-bottom: 1px solid var(--rule); }

.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding-block: clamp(1.25rem, 2.6vh, 1.75rem);
  font-size: clamp(1.05rem, 1.7vw, 1.35rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  cursor: pointer;
  list-style: none;
}

.faq__q::-webkit-details-marker { display: none; }

.faq__sign {
  position: relative;
  width: 14px;
  height: 14px;
  flex: none;
}

.faq__sign::before,
.faq__sign::after {
  content: "";
  position: absolute;
  inset: 50% 0 auto 0;
  height: 1px;
  background: var(--ink);
  transition: transform var(--slow) var(--ease);
}

.faq__sign::after { transform: rotate(90deg); }
.faq__item[open] .faq__sign::after { transform: rotate(0deg); }

/* Open state is the one place a whole answer is marked, so the accent does the
   marking instead of another grey rule. */
.faq__item[open] .faq__sign::before,
.faq__item[open] .faq__sign::after { background: var(--accent); }

.faq__a {
  padding-bottom: clamp(1.25rem, 2.6vh, 1.75rem);
  padding-right: clamp(0rem, 8vw, 6rem);
  padding-left: 0.875rem;
  border-left: 1px solid var(--accent);
  color: var(--ink-2);
  max-width: 68ch;
}

/* --------------------------------------------------------------------------
   14b. Terms

   Named topic on the left, its clauses on the right, a hairline between each.
   The same left-label / right-content structure as the index row, set at prose
   scale because this right column carries sentences rather than a figure.

   Deliberately not numbered: the terms are a set of topics, not a sequence, so
   markers would imply an order the reader does not need.
   -------------------------------------------------------------------------- */

.terms__intro { margin-bottom: clamp(2rem, 5vh, 3rem); }

.terms { border-top: 1px solid var(--rule); }

.terms__group {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: 0.75rem clamp(1.5rem, 4vw, 4rem);
  padding-block: clamp(1.5rem, 3.2vh, 2.25rem);
  border-bottom: 1px solid var(--rule);
}

.terms__name {
  font-size: clamp(1.05rem, 1.5vw, 1.25rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.3;
  text-wrap: balance;
}

.terms__list li {
  color: var(--ink-2);
  max-width: 60ch;
}

.terms__list li + li { margin-top: 0.7rem; }


@media (max-width: 760px) {
  .terms__group { grid-template-columns: minmax(0, 1fr); }
}

/* --------------------------------------------------------------------------
   15. Closing band
   -------------------------------------------------------------------------- */

.band {
  padding-block: clamp(5rem, 14vh, 10rem);
  border-top: 1px solid var(--rule-soft);
}

.band__title { max-width: 16ch; }

.band__actions { margin-top: clamp(2rem, 5vh, 3rem); }

/* --------------------------------------------------------------------------
   16. Footer
   -------------------------------------------------------------------------- */

.foot {
  border-top: 1px solid var(--rule);
  padding-block: 2rem 2.5rem;
}

.foot__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
}

.foot__links {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
}

.foot a {
  color: var(--ink-3);
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: color var(--fast) var(--ease), border-color var(--fast) var(--ease);
}

.foot a:hover { color: var(--ink); border-bottom-color: var(--accent); }

/* Inline text link, currently the "See full pricing" route off the homepage. */
.link {
  border-bottom: 1px solid var(--accent);
  padding-bottom: 2px;
  transition: color var(--fast) var(--ease);
}

.link:hover { color: var(--accent); }

/* --------------------------------------------------------------------------
   17. Scroll reveal

   Reason it exists: the pages are long and quiet, and a small settle on entry
   marks where one section ends and the next begins. Nothing loops, nothing
   moves after it has landed.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 520ms var(--ease), transform 520ms var(--ease);
  }
  .reveal.is-in {
    opacity: 1;
    transform: none;
  }
}

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

/* --------------------------------------------------------------------------
   18. Print
   -------------------------------------------------------------------------- */

@media print {
  .masthead, .band { display: none; }
  body { background: #fff; color: #000; }
}