/* =====================================================================
       annaknoll.com — TRAVEL page
       Direction: Hilma af Klint, "The Ten Largest" — green-led.
       Colour tokens are from the approved design system (tokens.css).
       Accessibility contract: AAA (7:1) text, AA (3:1) non-text.
       Hue is load-bearing: green = travel. Do not introduce violet as an
       accent here — the lilac field is decorative and non-semantic only.
       ===================================================================== */
    :root {
      /* green ramp — travel craft */
      --g50:#F0F8F0; --g100:#E4F1E4; --g200:#D0E5D0; --g300:#B2D3B5; --g400:#89B98F;
      --g500:#599564; --g600:#317042; --g700:#1A5831; --g800:#094324; --g900:#013019;
      /* ink ramp — shared neutral, faint violet bias */
      --i50:#F6F5F7; --i100:#EDECEE; --i200:#DEDDE1; --i300:#CAC8CD; --i400:#ACA9B0;
      --i500:#86838B; --i600:#625F67; --i700:#4B4950; --i800:#39373D; --i900:#28262A;
      /* lilac — decorative field only, carries no meaning */
      --v100:#F3E8FC;

      --surface:#FFFFFF;
      --text:var(--i900);            /* body        ≥ 13.84 on page */
      --text-secondary:var(--i700);  /* secondary   ≥ 8.19 on page */
      --accent:var(--g700);          /* links/labels ≥ 7.81 on page */
      --display:var(--g900);
      --line:var(--i200);            /* decorative hairline */
      --keyline:var(--g500);         /* meaningful rule, 3.28 on page */

      --maxw: 720px;
    }

    * { box-sizing: border-box; margin: 0; padding: 0; }

    html { scroll-behavior: smooth; }

    body {
      font-family: 'Faustina', Georgia, serif;
      background: var(--g50);
      color: var(--text);
      line-height: 1.6;
      -webkit-font-smoothing: antialiased;
    }

    /* Skip link — visible on focus */
    .skip {
      position: absolute; left: 12px; top: -60px;
      background: var(--g700); color: #fff; padding: 10px 16px;
      font-family: 'Karla', sans-serif; font-weight: 700; font-size: 14px;
      text-decoration: none; z-index: 100; transition: top .15s ease;
    }
    .skip:focus { top: 12px; }

    .wrap {
      max-width: var(--maxw);
      margin-inline: auto;
      padding: 0 24px;
    }

    /* ---------- Hero (af Klint fields, opaque, in the bleed) ---------- */
    header.hero {
      position: relative;
      overflow: hidden;
      text-align: center;
      background: var(--g50);
    }
    /* Opaque circular fields — decorative, never a text ground.
       Every field is fully opaque so the colour under any text is known. */
    .field { position: absolute; border-radius: 50%; z-index: 0; }
    .field.a { width: 460px; height: 460px; background: var(--g100);
               left: -180px; top: -160px; }
    .field.l { width: 300px; height: 300px; background: var(--v100);
               right: -150px; top: -110px; }
    .field.b { width: 180px; height: 180px; background: var(--g200);
               left: -120px; bottom: -90px; }
    .hero .wrap { position: relative; z-index: 1; padding-top: 72px; padding-bottom: 44px; }

    .photo {
      width: 148px;
      height: 148px;
      border-radius: 50%;
      object-fit: cover;
      margin: 0 auto 28px;
      display: block;
      border: 4px solid var(--surface);
      background: var(--g200);
    }

    h1 {
      font-family: 'Faustina', Georgia, serif;
      font-weight: 600;
      font-size: clamp(38px, 8vw, 54px);
      line-height: 1.06;
      letter-spacing: -0.02em;
      color: var(--display);
      text-wrap: balance;
    }

    .tagline {
      margin: 16px auto 0;
      font-size: clamp(16px, 3.4vw, 19px);
      line-height: 1.55;
      color: var(--text-secondary);
      max-width: 34ch;
    }

    /* ---------- Keyline eyebrow (bar + Karla label) ---------- */
    .eyebrow {
      display: flex;
      align-items: center;
      gap: 10px;
      font-family: 'Karla', sans-serif;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--accent);
      margin-bottom: 16px;
    }
    .eyebrow::before {
      content: "";
      width: 22px; height: 4px; flex: none;
      background: var(--accent);
    }

    /* ---------- Primary CTA ---------- */
    .cta-row { margin-top: 30px; display: flex; justify-content: center; }

    .btn-cta {
      display: inline-flex;
      align-items: center;
      min-height: 48px;
      background: var(--g700);
      color: #fff;
      text-decoration: none;
      font-family: 'Karla', sans-serif;
      font-weight: 700;
      font-size: 16px;
      letter-spacing: .01em;
      padding: 14px 30px;
      border-radius: 12px;
      box-shadow: 0 6px 16px rgba(1, 48, 25, 0.20);
      transition: background 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
    }
    .btn-cta:hover { background: var(--g800); transform: translateY(-1px); box-shadow: 0 9px 22px rgba(1, 48, 25, 0.26); }

    /* ---------- Section rhythm — one uniform gap between every stacked box ---------- */
    main > section { margin-top: 16px; }

    .card {
      background: var(--surface);
      border: 1px solid var(--line);
      padding: 36px 32px;
    }

    .bio .bio-copy p { color: var(--text); font-size: 17px; }
    .bio .bio-copy p + p { margin-top: 16px; }

    .lead { color: var(--text-secondary); font-size: 16px; margin-bottom: 18px; }

    /* ---------- Instagram gallery ---------- */
    .ig-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 10px;
      margin-bottom: 24px;
    }
    .ig-item {
      display: block;
      aspect-ratio: 1 / 1;
      overflow: hidden;
      background: var(--g100);
    }
    .ig-item img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      transition: transform 0.35s ease;
    }
    .ig-item:hover img { transform: scale(1.06); }

    .ig-follow { text-align: center; }
    .btn-ig {
      display: inline-flex;
      align-items: center;
      min-height: 44px;
      text-decoration: none;
      font-family: 'Karla', sans-serif;
      font-weight: 700;
      font-size: 15px;
      padding: 11px 24px;
      border: 2px solid var(--g700);
      border-radius: 12px;
      color: var(--accent);
      transition: background 0.18s ease, color 0.18s ease;
    }
    .btn-ig:hover { background: var(--g700); color: #fff; }

    @media (max-width: 520px) { .ig-grid { gap: 7px; } }

    /* ---------- Specialties ---------- */
    .chips {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 20px;
    }
    .chip {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: var(--g100);
      border: 1px solid var(--g200);
      padding: 9px 15px;
      font-family: 'Karla', sans-serif;
      font-size: 13.5px;
      line-height: 1.1;
      color: var(--text-secondary);
      font-weight: 500;
    }

    /* ---------- Links ---------- */
    .links { display: grid; gap: 16px; }
    .link-item {
      display: flex;
      align-items: center;
      gap: 14px;
      background: var(--surface);
      border: 1px solid var(--line);
      padding: 16px 20px;
      text-decoration: none;
      color: var(--text);
      transition: border-color 0.18s ease, transform 0.18s ease;
    }
    .link-item:hover { border-color: var(--g700); transform: translateY(-1px); }
    .link-item .ico { width: 22px; text-align: center; flex: none; font-size: 18px; }
    .link-item .sub { color: var(--text-secondary); font-weight: 400; font-size: 13px; }
    .link-item .label {
      display: flex; flex-direction: column; line-height: 1.3;
      font-family: 'Karla', sans-serif; font-weight: 700;
    }
    .link-item .label .sub { font-family: 'Faustina', serif; }
    .link-item .arrow { margin-left: auto; color: var(--accent); font-weight: 700; }

    /* ---------- Closing CTA (lilac bookend) ---------- */
    .closing-band { position: relative; overflow: hidden; margin-top: 16px; }
    .closing-band > .wrap { position: relative; z-index: 1; }
    .field.lilac-lo { width: 320px; height: 320px; background: var(--v100);
                      left: -150px; bottom: -150px; }
    .field.green-lo { width: 220px; height: 220px; background: var(--g100);
                      right: -120px; top: -70px; }
    .closing { text-align: center; padding: 24px 24px 56px; }
    .closing h2 {
      font-family: 'Faustina', Georgia, serif;
      font-weight: 600;
      font-size: clamp(28px, 6vw, 40px);
      line-height: 1.08;
      letter-spacing: -0.015em;
      color: var(--display);
      margin-bottom: 10px;
      text-wrap: balance;
    }
    .closing p { color: var(--text-secondary); margin-bottom: 24px; }

    footer {
      text-align: center;
      padding: 32px 0 48px;
      color: var(--text-secondary);
      font-size: 13px;
      border-top: 2px solid var(--keyline);
    }
    .inline { color: var(--accent); text-decoration: underline; font-weight: 600; }

    /* ---------- Focus + reduced motion ---------- */
    a:focus-visible {
      outline: 3px solid var(--g900);
      outline-offset: 3px;
    }
    @media (prefers-reduced-motion: reduce) {
      * { transition: none !important; scroll-behavior: auto !important; }
      .ig-item:hover img,
      .btn-cta:hover,
      .link-item:hover { transform: none !important; }
    }