*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
 
    :root {
      --white:    #ffffff;
      --off:      #f6f4f1;
      --rule:     #ddd8d0;
      --ink:      #1c1916;
      --ink-mid:  #6b6560;
      --ink-dim:  #b5afa6;
      --accent:   #b05c3a;
      --h: 66px;
    }
 
    html, body { height: 100%; background: var(--white); color: var(--ink); font-family: 'Jost', sans-serif; font-weight: 300; }
 
    /* ── RADIO INPUTS (state machine) ── */
    .r { display: none; }
 
    /* ── HEADER ── */
    header {
      position: fixed; top: 0; left: 0; right: 0; z-index: 100;
      height: var(--h);
      background: var(--white);
      border-bottom: 1px solid var(--rule);
      display: flex; align-items: center; padding: 0 52px;
      justify-content: space-between;
    }
    .logo { font-family: 'Playfair Display', serif; font-size: 1.2rem; letter-spacing: 0.05em; }
    .logo em { color: var(--accent); font-style: italic; }
    .tagline { font-size: 0.62rem; letter-spacing: 0.35em; text-transform: uppercase; color: var(--ink-dim); position: absolute; left: 50%; transform: translateX(-50%); }
    .hint { font-size: 0.62rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-dim); }
 
    /* ── LAYOUT ── */
    main {
      padding-top: var(--h);
      min-height: 100vh;
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      gap: 24px; padding-bottom: 40px;
    }
 
    /* ── CAROUSEL SHELL ── */
    .carousel {
      position: relative;
      width: min(860px, 100vw - 48px);
    }
 
    /* ── SLIDE VIEWPORT ── */
    .slides {
      width: 100%; aspect-ratio: 3 / 2;
      overflow: hidden;
      border: 1px solid var(--rule);
      box-shadow: 0 2px 24px rgba(0,0,0,0.07);
      background: var(--off);
      position: relative;
    }
 
    /* ── INDIVIDUAL SLIDES ── */
    .slide {
      position: absolute; inset: 0;
      opacity: 0;
      transition: opacity 0.55s ease;
      display: flex; align-items: center; justify-content: center;
    }
    .slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
 
    /* Placeholder */
    .ph {
      width: 100%; height: 100%;
      display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
      background: var(--off);
    }
    .ph-box {
      width: 68px; height: 52px;
      border: 1.5px solid var(--rule);
      position: relative;
    }
    .ph-box::before {
      content: '';
      position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%);
      width: 26px; height: 1px; background: var(--rule);
    }
    .ph-box::after {
      content: '';
      position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
      width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid var(--rule);
    }
    .ph-n { font-family: 'Playfair Display', serif; font-style: italic; font-size: 0.78rem; color: var(--ink-dim); letter-spacing: 0.12em; }
 
    /* Caption */
    .caption {
      position: absolute; bottom: 0; left: 0; right: 0;
      padding: 48px 28px 20px;
      background: linear-gradient(to top, rgba(255,255,255,0.95) 20%, transparent);
      display: flex; justify-content: space-between; align-items: flex-end;
    }
    .cap-t { font-family: 'Playfair Display', serif; font-style: italic; font-size: 1rem; color: var(--ink); }
    .cap-m { font-size: 0.6rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--ink-mid); }
 
    /* ── ARROWS (labels) ── */
    .arrow {
      position: absolute; top: 50%; transform: translateY(-50%);
      width: 42px; height: 42px;
      background: rgba(255,255,255,0.92);
      border: 1px solid var(--rule);
      display: flex; align-items: center; justify-content: center;
      cursor: pointer; z-index: 10;
      font-size: 0.95rem; color: var(--ink-mid);
      transition: color 0.2s, border-color 0.2s, box-shadow 0.2s;
      user-select: none; line-height: 1;
    }
    .arrow:hover { color: var(--accent); border-color: var(--accent); box-shadow: 0 2px 14px rgba(176,92,58,0.18); }
    .prev { left: -21px; }
    .next { right: -21px; }
 
    /*
      ═══════════════════════════════════════════════════════
      CSS-ONLY CAROUSEL STATE MACHINE
      ═══════════════════════════════════════════════════════
      Strategy:
        - 5 hidden radio inputs (#s1–#s5) share name="sl"
        - :checked ~ * general sibling selector drives all state
        - Arrows are <label> elements with for= pointing to the
          correct next/prev input
        - Each slide has ONE prev and ONE next arrow label pair
          that is shown only when that slide is active
        - Dots similarly show active state via :checked
 
      Arrow visibility: we render 5 arrow pairs (prev+next),
      one per slide. All pairs are hidden by default; only the
      pair for the currently active slide is shown.
      ═══════════════════════════════════════════════════════
    */
 
    /* Hide ALL arrow pairs by default */
    .ap { display: none; position: absolute; inset: 0; pointer-events: none; }
    .ap label { pointer-events: all; }
 
    /* Show the arrow pair that matches the active slide */
    #s1:checked ~ main .carousel .ap-1,
    #s2:checked ~ main .carousel .ap-2,
    #s3:checked ~ main .carousel .ap-3,
    #s4:checked ~ main .carousel .ap-4,
    #s5:checked ~ main .carousel .ap-5 { display: block; }
 
    /* Show the active slide */
    #s1:checked ~ main .slides .slide:nth-child(1),
    #s2:checked ~ main .slides .slide:nth-child(2),
    #s3:checked ~ main .slides .slide:nth-child(3),
    #s4:checked ~ main .slides .slide:nth-child(4),
    #s5:checked ~ main .slides .slide:nth-child(5) { opacity: 1; z-index: 1; }
 
    /* ── DOTS ── */
    .dots { display: flex; gap: 10px; align-items: center; justify-content: center; }
    .dot {
      display: block;
      width: 8px; height: 8px; border-radius: 50%;
      border: 1.5px solid var(--ink-dim);
      cursor: pointer;
      transition: background 0.25s, border-color 0.25s, transform 0.25s;
    }
    .dot:hover { border-color: var(--accent); }
 
    #s1:checked ~ main .dots .dot[for="s1"],
    #s2:checked ~ main .dots .dot[for="s2"],
    #s3:checked ~ main .dots .dot[for="s3"],
    #s4:checked ~ main .dots .dot[for="s4"],
    #s5:checked ~ main .dots .dot[for="s5"] {
      background: var(--accent);
      border-color: var(--accent);
      transform: scale(1.4);
    }
 
    /* ── COUNTER ── */
    .counter { font-size: 0.68rem; letter-spacing: 0.2em; color: var(--ink-dim); }
    .cn { display: none; }
    #s1:checked ~ main .cn1,
    #s2:checked ~ main .cn2,
    #s3:checked ~ main .cn3,
    #s4:checked ~ main .cn4,
    #s5:checked ~ main .cn5 { display: inline; }
 
    /* ── TO ADD YOUR OWN PHOTOS ──────────────────────
       Replace the <div class="ph">…</div> inside any
       .slide with:
         <img src="your-photo.jpg" alt="Description"/>
       The caption text can be edited in the .caption div.
    ─────────────────────────────────────────────── */
 
    /* ── LIGHTBOX ─────────────────────────────────────── */
    .slide-trigger {
      position: absolute; inset: 0;
      cursor: zoom-in; z-index: 2; display: block;
    }
    .caption { z-index: 3; pointer-events: none; }
 
    .lightbox {
      display: none; position: fixed; inset: 0; z-index: 500;
      background: rgba(20,18,15,0.93);
      align-items: center; justify-content: center;
      animation: lb-in 0.25s ease;
    }
    @keyframes lb-in { from { opacity:0; } to { opacity:1; } }
 
    #lb1:checked ~ .lb-1,
    #lb2:checked ~ .lb-2,
    #lb3:checked ~ .lb-3,
    #lb4:checked ~ .lb-4,
    #lb5:checked ~ .lb-5 { display: flex; }
 
    .lb-backdrop { position: absolute; inset: 0; cursor: zoom-out; z-index: 0; }
 
    .lb-content {
      position: relative; z-index: 1;
      /* Both axes constrained — works for portrait and landscape */
      max-width:  min(1100px, 92vw);
      max-height: 90vh;
      display: flex; flex-direction: column; align-items: center; gap: 12px;
      animation: lb-rise 0.32s cubic-bezier(0.22,1,0.36,1);
    }
    @keyframes lb-rise {
      from { transform: scale(0.94) translateY(10px); opacity:0; }
      to   { transform: scale(1)    translateY(0);    opacity:1; }
    }
    .lb-content img {
      /* Portrait: height drives size. Landscape: width drives size.
         calc() reserves space for the caption row below. */
      display: block;
      max-width:  100%;
      max-height: calc(90vh - 52px);
      width: auto;
      height: auto;
      object-fit: contain;
      box-shadow: 0 8px 60px rgba(0,0,0,0.6);
    }
    .lb-content .lb-ph {
      max-width:  100%;
      max-height: calc(90vh - 52px);
      box-shadow: 0 8px 60px rgba(0,0,0,0.6);
    }
    .lb-ph {
      width: min(700px, 80vw); aspect-ratio: 3/2;
      background: #1e1b17; border: 1px solid #333;
      display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
    }
    .lb-ph .ph-box { border-color: #444; }
    .lb-ph .ph-box::before { background: #444; }
    .lb-ph .ph-box::after  { border-color: #444; }
    .lb-ph .ph-n { color: #666; }
 
    .lb-caption {
      display: flex; justify-content: space-between; align-items: baseline;
      width: 100%; padding: 0 2px;
    }
    .lb-cap-t { font-family: 'Playfair Display', serif; font-style: italic; font-size: 0.95rem; color: rgba(255,255,255,0.75); }
    .lb-cap-m { font-size: 0.6rem; letter-spacing: 0.28em; text-transform: uppercase; color: rgba(255,255,255,0.3); }
 
    .lb-close {
      position: absolute; top: 20px; right: 24px; z-index: 2;
      width: 36px; height: 36px;
      border: 1px solid rgba(255,255,255,0.2);
      color: rgba(255,255,255,0.55);
      display: flex; align-items: center; justify-content: center;
      font-size: 1rem; cursor: pointer;
      transition: color 0.2s, border-color 0.2s;
    }
    .lb-close:hover { color: #fff; border-color: rgba(255,255,255,0.6); }
 
    @media (max-width: 600px) {
      header { padding: 0 18px; }
      .tagline { display: none; }
      .prev { left: 6px; } .next { right: 6px; }
    }