:root{
      --frost:#F5F7FA;
      --birch:#EFE6D6;
      --slate:#3E4A57;
      --steel:#4B6D86;
      --ice:#A9C6DA;
      --fjord:#0C2233;
      --ember:#B36A3E;
      --char:#0A141D;

      --ink: rgba(12,34,51,.92);
      --muted: rgba(12,34,51,.70);
      --hair: rgba(12,34,51,.18);

      --panel: rgba(245,247,250,.78);
      --panel2: rgba(239,230,214,.70);
      --shadow: 0 18px 50px rgba(10,20,29,.18);
      --shadow2: 0 10px 24px rgba(10,20,29,.14);

      --radius: 16px;
      --radius2: 22px;
      --max: 1180px;

      --ease: cubic-bezier(.2,.7,.2,1);
      --t: .42s var(--ease);

      --track: .08em;
      --track2: .14em;
    }

    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0;
      color:var(--ink);
      background:
        radial-gradient(1200px 700px at 15% 5%, rgba(169,198,218,.30), transparent 60%),
        radial-gradient(900px 600px at 85% 0%, rgba(179,106,62,.14), transparent 55%),
        linear-gradient(180deg, var(--frost), rgba(245,247,250,.86) 45%, rgba(239,230,214,.60));
      font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
      line-height:1.6;
      letter-spacing:.01em;
      overflow-x:hidden;
    }

    /* Subtle “felt + linen grain” */
    body::before{
      content:"";
      position:fixed;
      inset:0;
      pointer-events:none;
      background:
        repeating-linear-gradient(0deg, rgba(12,34,51,.035), rgba(12,34,51,.035) 1px, transparent 1px, transparent 6px),
        repeating-linear-gradient(90deg, rgba(12,34,51,.025), rgba(12,34,51,.025) 1px, transparent 1px, transparent 7px);
      mix-blend-mode:multiply;
      opacity:.55;
    }

    a{color:var(--steel); text-decoration:none}
    a:hover{color:var(--fjord)}
    a:focus-visible,
    button:focus-visible,
    input:focus-visible,
    textarea:focus-visible{
      outline:3px solid rgba(169,198,218,.75);
      outline-offset:3px;
      border-radius:10px;
    }

    .container{
      width:min(var(--max), calc(100% - 2rem));
      margin-inline:auto;
    }

    /* Header + Nav (pure CSS burger) */
    header{
      position:sticky;
      top:0;
      z-index:50;
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      border-bottom:1px solid rgba(12,34,51,.10);
      background:
        linear-gradient(180deg, rgba(245,247,250,.82), rgba(245,247,250,.66));
    }

    .mast{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:1rem;
      padding:.9rem 0;
    }

    .brand{
      display:flex;
      align-items:center;
      gap:.9rem;
      min-width: 220px;
    }
    .mark{
      width:44px; height:44px;
      border-radius:14px;
      background:
        linear-gradient(135deg, rgba(75,109,134,.35), rgba(12,34,51,.86)),
        radial-gradient(10px 10px at 30% 30%, rgba(179,106,62,.85), transparent 60%);
      box-shadow: inset 0 0 0 1px rgba(245,247,250,.25), 0 10px 28px rgba(10,20,29,.18);
      position:relative;
    }
    .mark::before, .mark::after{
      content:"";
      position:absolute;
      inset:10px;
      border-radius:10px;
      border:1px solid rgba(239,230,214,.35);
      transform:skewX(-10deg);
    }
    .mark::after{
      inset:16px;
      border-color: rgba(169,198,218,.35);
      transform:skewX(12deg);
    }

    .brand h2{
      margin:0;
      font-size:.92rem;
      letter-spacing:var(--track2);
      text-transform:uppercase;
      font-weight:750;
      color:var(--fjord);
      line-height:1.05;
    }
    .brand p{
      margin:.15rem 0 0;
      font-size:.82rem;
      color:var(--muted);
      letter-spacing:.03em;
    }

    /* Burger control (outside nav to satisfy nav-only rule) */
    .navctl{
      display:flex;
      align-items:center;
      gap:.65rem;
    }

    .burger{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      width:44px;height:44px;
      border-radius:14px;
      border:1px solid rgba(12,34,51,.14);
      background: rgba(245,247,250,.62);
      box-shadow: 0 10px 26px rgba(10,20,29,.10);
      cursor:pointer;
      transition: transform var(--t), box-shadow var(--t), border-color var(--t);
      user-select:none;
    }
    .burger:hover{transform: translateY(-1px); border-color: rgba(179,106,62,.35); box-shadow: 0 14px 34px rgba(10,20,29,.14)}
    .burger span{
      width:18px; height:2px; background: rgba(12,34,51,.72);
      position:relative; display:block;
      border-radius:2px;
      transition: background var(--t);
    }
    .burger span::before, .burger span::after{
      content:"";
      position:absolute;
      left:0;
      width:18px; height:2px;
      background: rgba(12,34,51,.72);
      border-radius:2px;
      transition: transform var(--t), top var(--t), bottom var(--t), opacity var(--t);
    }
    .burger span::before{top:-6px}
    .burger span::after{bottom:-6px}

    #nav-toggle{
      position:absolute;
      width:1px; height:1px;
      opacity:0;
      pointer-events:none;
    }

    /* Nav: rule says nav contains only ul li a (we comply) */
    nav{
      position:fixed;
      inset:72px 1rem auto 1rem;
      max-width: var(--max);
      margin-inline:auto;
      border-radius: 18px;
      background: rgba(245,247,250,.92);
      border:1px solid rgba(12,34,51,.12);
      box-shadow: var(--shadow2);
      overflow:hidden;
      transform-origin: top;
      transform: scaleY(.92);
      opacity:0;
      pointer-events:none;
      transition: transform var(--t), opacity var(--t);
    }
    nav ul{
      list-style:none;
      margin:0;
      padding:.65rem;
      display:grid;
      gap:.25rem;
    }
    nav li a{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:1rem;
      padding:.85rem .9rem;
      border-radius:14px;
      color: var(--fjord);
      letter-spacing:.06em;
      text-transform:uppercase;
      font-weight:720;
      font-size:.86rem;
      border:1px solid transparent;
      transition: background var(--t), border-color var(--t), transform var(--t), color var(--t);
      position:relative;
    }
    nav li a::after{
      content:"";
      width:10px; height:10px;
      border-right:1.5px solid rgba(12,34,51,.50);
      border-bottom:1.5px solid rgba(12,34,51,.50);
      transform: rotate(-45deg);
      opacity:.55;
      transition: opacity var(--t), transform var(--t), border-color var(--t);
    }
    nav li a:hover{
      background:
        linear-gradient(90deg, rgba(169,198,218,.28), rgba(239,230,214,.36));
      border-color: rgba(179,106,62,.22);
      transform: translateY(-1px);
      color: rgba(12,34,51,.95);
    }
    nav li a:hover::after{
      opacity:.9;
      border-color: rgba(179,106,62,.55);
      transform: rotate(-45deg) translateX(2px);
    }

    #nav-toggle:checked ~ header nav{
      opacity:1;
      transform: scaleY(1);
      pointer-events:auto;
    }
    #nav-toggle:checked ~ header .burger span{background:transparent}
    #nav-toggle:checked ~ header .burger span::before{top:0; transform: rotate(45deg)}
    #nav-toggle:checked ~ header .burger span::after{bottom:0; transform: rotate(-45deg)}

    /* Desktop nav layout */
    @media (min-width: 1200px){
      nav{
        position:static;
        inset:auto;
        transform:none;
        opacity:1;
        pointer-events:auto;
        background: transparent;
        border:0;
        box-shadow:none;
        max-width:none;
      }
      nav ul{
        padding:0;
        display:flex;
        justify-content:flex-end;
        align-items:center;
        gap:.25rem;
      }
      nav li a{
        padding:.55rem .75rem;
        background: transparent;
        border-color: transparent;
      }
      nav li a::after{display:none}
      .burger{display:none}
      .mast{padding:1rem 0}
    }

    /* HERO */
    .hero{
      min-height: calc(100vh - 86px);
      display:grid;
      align-items:stretch;
      padding: 1.25rem 0 2rem;
    }

    .hero-grid{
      display:grid;
      gap:1rem;
      align-items:stretch;
    }

    .hero-card{
      border-radius: var(--radius2);
      background:
        linear-gradient(180deg, rgba(245,247,250,.86), rgba(239,230,214,.54));
      border:1px solid rgba(12,34,51,.12);
      box-shadow: var(--shadow);
      overflow:hidden;
      position:relative;
    }

    /* Rivet dots + braided separators */
    .hero-card::before{
      content:"";
      position:absolute;
      inset:14px;
      border-radius: calc(var(--radius2) - 10px);
      border:1px solid rgba(12,34,51,.10);
      pointer-events:none;
    }
    .rivets{
      position:absolute;
      inset:0;
      pointer-events:none;
      opacity:.9;
    }
    .rivet{
      width:8px;height:8px;border-radius:50%;
      background: radial-gradient(circle at 30% 30%, rgba(245,247,250,.9), rgba(12,34,51,.38));
      box-shadow: inset 0 0 0 1px rgba(245,247,250,.22);
      position:absolute;
    }
    .r1{top:14px; left:14px}
    .r2{top:14px; right:14px}
    .r3{bottom:14px; left:14px}
    .r4{bottom:14px; right:14px}

    .hero-inner{
      display:grid;
      gap:1rem;
      padding:1.2rem;
    }

    .kicker{
      display:flex;
      flex-wrap:wrap;
      gap:.6rem;
      align-items:center;
      color: rgba(12,34,51,.80);
      font-weight:650;
      letter-spacing:.08em;
      text-transform:uppercase;
      font-size:.78rem;
    }
    .kicker .tag{
      padding:.35rem .55rem;
      border-radius:999px;
      border:1px solid rgba(12,34,51,.14);
      background: rgba(245,247,250,.62);
      box-shadow: 0 10px 18px rgba(10,20,29,.08);
    }
    .kicker .tag.em{
      border-color: rgba(179,106,62,.35);
      background: linear-gradient(90deg, rgba(179,106,62,.10), rgba(169,198,218,.16));
    }

    .hero h1{
      margin:0;
      font-size: clamp(2rem, 4.5vw, 3.35rem);
      line-height:1.08;
      text-transform:uppercase;
      letter-spacing: var(--track2);
      font-weight: 820;
      color: var(--fjord);
    }
    .hero h1 span{
      display:block;
      font-weight:860;
      letter-spacing: .18em;
      color: rgba(12,34,51,.78);
      font-size: .62em;
      margin-top:.35rem;
    }

    .hero p{
      margin:0;
      max-width: 62ch;
      color: var(--muted);
      font-size: 1.03rem;
    }

    .actions{
      display:flex;
      flex-wrap:wrap;
      gap:.75rem;
      align-items:center;
      margin-top:.25rem;
    }

    .btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:.55rem;
      padding:.78rem 1rem;
      border-radius:14px;
      border:1px solid rgba(12,34,51,.18);
      background: linear-gradient(180deg, rgba(62,74,87,.10), rgba(245,247,250,.55));
      color: var(--fjord);
      font-weight:760;
      text-transform:uppercase;
      letter-spacing: .10em;
      font-size:.82rem;
      box-shadow: 0 16px 34px rgba(10,20,29,.12);
      transition: transform var(--t), box-shadow var(--t), border-color var(--t), background var(--t), color var(--t);
    }
    .btn:hover{
      transform: translateY(-2px);
      border-color: rgba(179,106,62,.45);
      box-shadow: 0 20px 44px rgba(10,20,29,.16);
      background: linear-gradient(180deg, rgba(179,106,62,.14), rgba(169,198,218,.18));
    }
    .btn.primary{
      background: linear-gradient(180deg, rgba(12,34,51,.92), rgba(12,34,51,.74));
      color: var(--frost);
      border-color: rgba(245,247,250,.20);
      box-shadow: 0 18px 48px rgba(12,34,51,.26);
      position:relative;
    }
    .btn.primary:hover{
      border-color: rgba(179,106,62,.60);
      box-shadow: 0 22px 58px rgba(12,34,51,.30);
    }
    .btn.primary::after{
      content:"";
      position:absolute;
      inset:1px;
      border-radius:13px;
      border:1px solid rgba(179,106,62,.25);
      pointer-events:none;
      opacity:.9;
    }

    .link{
      display:inline-block;
      padding:.4rem .2rem;
      font-weight:700;
      color: rgba(12,34,51,.85);
      letter-spacing:.06em;
      text-transform:uppercase;
      font-size:.82rem;
      position:relative;
    }
    .link::after{
      content:"";
      position:absolute;
      left:0;
      right:0;
      bottom:.15rem;
      height:1px;
      background: linear-gradient(90deg, rgba(169,198,218,.0), rgba(169,198,218,.95), rgba(179,106,62,.55), rgba(169,198,218,.0));
      transform: scaleX(.35);
      transform-origin:left;
      transition: transform var(--t), opacity var(--t);
      opacity:.9;
    }
    .link:hover::after{transform: scaleX(1)}
    .link:hover{color: var(--fjord)}

    /* Simple CSS slider (max 600px height) */
    .slider{
      border-radius: 20px;
      border:1px solid rgba(12,34,51,.14);
      background: rgba(245,247,250,.55);
      overflow:hidden;
      box-shadow: 0 18px 46px rgba(10,20,29,.14);
      max-height: 600px;
      height: min(52vh, 560px);
      position:relative;
    }

    .slides{
      height:100%;
      display:flex;
      width:300%;
      animation: drift 18s var(--ease) infinite;
    }
    @keyframes drift{
      0%, 27%{transform: translateX(0)}
      33%, 60%{transform: translateX(-33.3333%)}
      66%, 94%{transform: translateX(-66.6666%)}
      100%{transform: translateX(0)}
    }
    .slide{
      width:33.3333%;
      height:100%;
      position:relative;
      display:grid;
    }
    .slide img{
      width:100%;
      height:100%;
      object-fit:cover;
      filter: saturate(.78) contrast(1.08) brightness(.98);
    }
    .slide::after{
      content:"";
      position:absolute;
      inset:0;
      background:
        linear-gradient(90deg, rgba(12,34,51,.56), rgba(12,34,51,.18) 42%, rgba(12,34,51,.06)),
        radial-gradient(600px 260px at 12% 75%, rgba(179,106,62,.22), transparent 60%);
      mix-blend-mode:multiply;
      pointer-events:none;
    }
    .caption{
      position:absolute;
      left:1rem; right:1rem; bottom:1rem;
      display:grid;
      gap:.35rem;
      padding: .9rem 1rem;
      border-radius: 16px;
      background: rgba(245,247,250,.78);
      border:1px solid rgba(245,247,250,.35);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      box-shadow: 0 18px 44px rgba(10,20,29,.18);
    }
    .caption strong{
      text-transform:uppercase;
      letter-spacing: .14em;
      font-size:.82rem;
      color: var(--fjord);
    }
    .caption span{
      color: rgba(12,34,51,.74);
      font-size:.92rem;
    }

    @media (min-width: 768px){
      .hero-inner{padding:1.5rem}
      .hero-grid{
        grid-template-columns: 1.08fr .92fr;
        gap:1.2rem;
      }
      .slider{height: min(56vh, 600px)}
    }

    @media (min-width: 1200px){
      .hero{padding: 1.6rem 0 2.4rem}
      .hero-inner{padding:1.8rem 2rem}
      .hero-grid{gap:1.4rem}
    }

    /* Shared section primitives */
    main{
      padding: 1.5rem 0 2.4rem;
    }

    .section{
      padding: 1.1rem 0 1.6rem;
    }
    .section-head{
      display:flex;
      flex-wrap:wrap;
      gap:.8rem 1.2rem;
      align-items:flex-end;
      justify-content:space-between;
      margin-bottom: .9rem;
    }
    .section h2{
      margin:0;
      text-transform:uppercase;
      letter-spacing: var(--track2);
      font-weight: 840;
      color: var(--fjord);
      font-size: clamp(1.2rem, 2.2vw, 1.6rem);
    }
    .section .meta{
      color: var(--muted);
      max-width: 70ch;
      margin:0;
      font-size:.98rem;
    }

    .grid{
      display:grid;
      grid-template-columns: 1fr;
      gap: .9rem;
    }
    @media (min-width: 768px){
      .grid{grid-template-columns: repeat(2, 1fr); gap: 1rem}
    }
    @media (min-width: 1200px){
      .grid{grid-template-columns: repeat(3, 1fr); gap: 1.05rem}
    }

    .card{
      border-radius: var(--radius);
      border:1px solid rgba(12,34,51,.12);
      overflow:hidden;
      background: rgba(245,247,250,.72);
      box-shadow: 0 14px 34px rgba(10,20,29,.10);
      transition: transform var(--t), box-shadow var(--t), border-color var(--t), background var(--t);
      position:relative;
    }
    .card:hover{
      transform: translateY(-3px);
      box-shadow: 0 22px 54px rgba(10,20,29,.14);
      border-color: rgba(179,106,62,.35);
    }
    .card .thumb{
      aspect-ratio: 16/10;
      width:100%;
      display:block;
      background: rgba(12,34,51,.06);
      border-bottom: 1px solid rgba(12,34,51,.10);
    }
    .card .thumb img{
      width:100%;
      height:100%;
      object-fit:cover;
      filter: saturate(.76) contrast(1.06);
    }
    .card .body{
      padding: .95rem 1rem 1.05rem;
      display:grid;
      gap:.45rem;
    }
    .card h3{
      margin:0;
      color: var(--fjord);
      text-transform:uppercase;
      letter-spacing:.12em;
      font-weight: 820;
      font-size: 1rem;
      line-height:1.2;
    }
    .card p{
      margin:0;
      color: var(--muted);
      font-size:.98rem;
    }
    .card .rail{
      display:flex;
      gap:.75rem;
      flex-wrap:wrap;
      align-items:center;
      margin-top:.35rem;
      color: rgba(12,34,51,.70);
      font-size:.86rem;
      letter-spacing:.06em;
      text-transform:uppercase;
    }
    .card .dot{
      width:6px;height:6px;border-radius:50%;
      background: radial-gradient(circle at 30% 30%, rgba(245,247,250,.95), rgba(179,106,62,.85));
      box-shadow: 0 0 0 1px rgba(12,34,51,.10);
      display:inline-block;
    }

    /* Section individuality */
    .section.s1 .card{
      background: linear-gradient(180deg, rgba(245,247,250,.80), rgba(169,198,218,.16));
    }
    .section.s1 .card:hover{
      background: linear-gradient(180deg, rgba(245,247,250,.86), rgba(169,198,218,.22));
    }

    .section.s2{
      background:
        linear-gradient(180deg, rgba(239,230,214,.22), rgba(245,247,250,.0));
      border-top: 1px solid rgba(12,34,51,.08);
      border-bottom: 1px solid rgba(12,34,51,.08);
    }
    .section.s2 .card{
      background: linear-gradient(180deg, rgba(239,230,214,.72), rgba(245,247,250,.62));
    }
    .section.s2 .card:hover{
      transform: translateY(-4px) rotate(-.15deg);
      border-color: rgba(75,109,134,.35);
    }

    .section.s3 .card{
      background:
        linear-gradient(180deg, rgba(12,34,51,.06), rgba(245,247,250,.74));
    }
    .section.s3 .card::after{
      content:"";
      position:absolute;
      inset:0;
      pointer-events:none;
      background:
        linear-gradient(90deg, transparent, rgba(179,106,62,.08), transparent);
      transform: translateX(-65%);
      transition: transform .55s var(--ease);
      opacity:.9;
    }
    .section.s3 .card:hover::after{transform: translateX(65%)}
    .section.s3 .card:hover{border-color: rgba(179,106,62,.38)}

    /* Blog list */
    .blogwrap{
      padding: 1.4rem 0 2rem;
    }
    .blogblock{
      border-radius: 22px;
      border:1px solid rgba(12,34,51,.12);
      background:
        linear-gradient(180deg, rgba(245,247,250,.78), rgba(239,230,214,.50));
      box-shadow: var(--shadow2);
      overflow:hidden;
    }
    .bloghead{
      padding: 1rem 1rem .75rem;
      border-bottom:1px solid rgba(12,34,51,.10);
      background:
        linear-gradient(90deg, rgba(169,198,218,.18), rgba(245,247,250,.35));
    }
    .bloghead h2{
      margin:0;
      text-transform:uppercase;
      letter-spacing: var(--track2);
      font-weight:860;
      color: var(--fjord);
      font-size: 1.2rem;
    }
    .bloghead p{margin:.25rem 0 0; color:var(--muted); max-width:75ch}
    .bloglist{
      list-style:none;
      margin:0;
      padding:.5rem;
      display:grid;
      gap:.5rem;
    }
    .bloglist li a{
      display:grid;
      grid-template-columns: 96px 1fr;
      gap:.9rem;
      align-items:center;
      padding:.75rem;
      border-radius: 16px;
      border:1px solid transparent;
      color: var(--fjord);
      background: rgba(245,247,250,.55);
      transition: transform var(--t), border-color var(--t), background var(--t), box-shadow var(--t);
    }
    .bloglist li a:hover{
      transform: translateY(-2px);
      border-color: rgba(179,106,62,.28);
      background: linear-gradient(90deg, rgba(179,106,62,.08), rgba(169,198,218,.16));
      box-shadow: 0 16px 34px rgba(10,20,29,.12);
    }
    .bloglist img{
      width:96px; height:72px;
      border-radius: 14px;
      object-fit:cover;
      filter: saturate(.75) contrast(1.06);
      border:1px solid rgba(12,34,51,.10);
    }
    .blogtitle{
      display:grid;
      gap:.25rem;
    }
    .blogtitle strong{
      text-transform:uppercase;
      letter-spacing:.12em;
      font-weight:850;
      font-size:.92rem;
    }
    .blogtitle span{
      color: var(--muted);
      font-size:.95rem;
    }
    @media (min-width: 768px){
      .bloglist{padding:.75rem; gap:.65rem}
      .bloglist li a{grid-template-columns: 120px 1fr}
      .bloglist img{width:120px; height:84px}
      .bloghead{padding:1.1rem 1.2rem .85rem}
    }

    /* Content (centered) */
    .contentwrap{
      padding: 1.2rem 0 2rem;
    }
    .content{
      width:min(860px, 100%);
      margin-inline:auto;
      border-radius: 24px;
      border:1px solid rgba(12,34,51,.12);
      background:
        radial-gradient(900px 320px at 10% 0%, rgba(169,198,218,.22), transparent 60%),
        linear-gradient(180deg, rgba(245,247,250,.86), rgba(239,230,214,.54));
      box-shadow: var(--shadow);
      overflow:hidden;
    }
    .content-top{
      padding: 1rem 1rem .25rem;
      border-bottom:1px solid rgba(12,34,51,.10);
      display:flex;
      align-items:flex-end;
      justify-content:space-between;
      gap:1rem;
      flex-wrap:wrap;
    }
    .content-top h2{
      margin:0;
      text-transform:uppercase;
      letter-spacing: var(--track2);
      font-weight: 880;
      color: var(--fjord);
      font-size: 1.15rem;
    }
    .content-top .crumb{
      color: var(--muted);
      letter-spacing:.08em;
      text-transform:uppercase;
      font-weight:700;
      font-size:.78rem;
    }
    .content-media{
      padding: 1rem;
      display:grid;
      gap:.65rem;
      justify-items:center;
    }
    .heroimg{
      width:100%;
      max-width: 780px;
      aspect-ratio: 16/9;
      border-radius: 20px;
      border:1px solid rgba(12,34,51,.12);
      overflow:hidden;
      box-shadow: 0 18px 46px rgba(10,20,29,.16);
      background: rgba(12,34,51,.06);
    }
    .heroimg img{
      width:100%;
      height:100%;
      object-fit:cover;
      filter: saturate(.78) contrast(1.08) brightness(.98);
    }
    .rating{
      width:100%;
      max-width: 780px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:.75rem;
      padding: .7rem .85rem;
      border-radius: 16px;
      border:1px solid rgba(12,34,51,.12);
      background: rgba(245,247,250,.68);
    }
    .rating strong{
      text-transform:uppercase;
      letter-spacing:.12em;
      font-size:.82rem;
      color: var(--fjord);
    }
    .stars{
      display:flex;
      gap:.35rem;
      align-items:center;
      color: rgba(12,34,51,.72);
      font-weight:800;
      letter-spacing:.08em;
    }
    .divider{
      width:100%;
      max-width:780px;
      height:1px;
      background: linear-gradient(90deg, transparent, rgba(12,34,51,.18), rgba(179,106,62,.30), rgba(12,34,51,.18), transparent);
      margin:.3rem 0 .2rem;
    }

    .articlebox{
      padding: 1rem 1rem 1.2rem;
    }
    .articlebox article{
      padding: .9rem 0 0;
    }
    .articlebox h1{
      margin:0 0 .5rem;
      text-transform:uppercase;
      letter-spacing: var(--track2);
      font-weight: 900;
      color: var(--fjord);
      line-height:1.12;
      font-size: clamp(1.55rem, 3vw, 2.15rem);
    }
    .byline{
      display:flex;
      gap:.8rem;
      flex-wrap:wrap;
      align-items:center;
      margin:0 0 .9rem;
      color: var(--muted);
      text-transform:uppercase;
      letter-spacing:.10em;
      font-weight:720;
      font-size:.78rem;
    }
    .byline .pill{
      padding:.28rem .55rem;
      border-radius:999px;
      border:1px solid rgba(12,34,51,.12);
      background: rgba(245,247,250,.62);
    }

    .articletext{
      color: rgba(12,34,51,.86);
      font-size:1.03rem;
      max-width: 70ch;
    }
    .articletext p{margin:.7rem 0}
    .callout{
      margin:1rem 0;
      padding: .95rem 1rem;
      border-radius: 18px;
      border:1px solid rgba(12,34,51,.12);
      background:
        linear-gradient(90deg, rgba(179,106,62,.22), rgba(245,247,250,.66)),
        repeating-linear-gradient(45deg, rgba(12,34,51,.04), rgba(12,34,51,.04) 2px, transparent 2px, transparent 10px);
      position:relative;
      overflow:hidden;
    }
    .callout::before{
      content:"";
      position:absolute;
      left:0; top:0; bottom:0;
      width:5px;
      background: linear-gradient(180deg, rgba(179,106,62,.95), rgba(169,198,218,.55));
      box-shadow: 0 0 0 1px rgba(12,34,51,.10);
    }
    .callout h3{
      margin:0 0 .25rem;
      text-transform:uppercase;
      letter-spacing:.14em;
      font-size:.9rem;
      color: var(--fjord);
    }
    .callout p{margin:0; color: rgba(12,34,51,.78)}

    .prevnext{
      display:flex;
      flex-wrap:wrap;
      gap:.75rem;
      justify-content:space-between;
      padding: 0 1rem 1rem;
    }
    .pn{
      flex: 1 1 240px;
      border-radius: 18px;
      border:1px solid rgba(12,34,51,.12);
      background: rgba(245,247,250,.62);
      padding: .85rem 1rem;
      transition: transform var(--t), border-color var(--t), box-shadow var(--t), background var(--t);
    }
    .pn:hover{
      transform: translateY(-2px);
      border-color: rgba(179,106,62,.30);
      box-shadow: 0 18px 44px rgba(10,20,29,.12);
      background: linear-gradient(90deg, rgba(169,198,218,.16), rgba(245,247,250,.55));
    }
    .pn small{
      display:block;
      text-transform:uppercase;
      letter-spacing:.14em;
      color: rgba(12,34,51,.62);
      font-weight:800;
      font-size:.72rem;
      margin-bottom:.25rem;
    }
    .pn a{
      color: var(--fjord);
      font-weight:850;
      text-transform:uppercase;
      letter-spacing:.10em;
      font-size:.88rem;
    }

    .comments{
      padding: 1rem;
      border-top: 1px solid rgba(12,34,51,.10);
      display:grid;
      gap: .85rem;
    }
    .comments h2{
      margin:0;
      text-transform:uppercase;
      letter-spacing: var(--track2);
      font-weight: 900;
      color: var(--fjord);
      font-size: 1.05rem;
    }
    .comments .empty{
      border-radius: 18px;
      border:1px dashed rgba(12,34,51,.22);
      background: rgba(245,247,250,.50);
      padding: 1rem;
      color: var(--muted);
    }

    form{
      display:grid;
      gap:.7rem;
      padding: .9rem;
      border-radius: 20px;
      border:1px solid rgba(12,34,51,.12);
      background: rgba(245,247,250,.62);
      box-shadow: 0 12px 28px rgba(10,20,29,.10);
    }
    label{
      font-weight:800;
      letter-spacing:.10em;
      text-transform:uppercase;
      font-size:.75rem;
      color: rgba(12,34,51,.78);
    }
    input, textarea{
      width:100%;
      padding:.75rem .85rem;
      border-radius: 14px;
      border:1px solid rgba(12,34,51,.16);
      background: rgba(245,247,250,.75);
      color: var(--fjord);
      transition: border-color var(--t), box-shadow var(--t), transform var(--t);
    }
    textarea{min-height: 120px; resize: vertical}
    input:focus-visible, textarea:focus-visible{
      border-color: rgba(179,106,62,.45);
      box-shadow: 0 0 0 5px rgba(169,198,218,.25);
    }

    /* Related */
    .related{
      padding: 1rem;
      border-top:1px solid rgba(12,34,51,.10);
      display:grid;
      gap:.8rem;
    }
    .related h2{
      margin:0;
      text-transform:uppercase;
      letter-spacing: var(--track2);
      font-weight: 900;
      color: var(--fjord);
      font-size: 1.05rem;
    }
    .relgrid{
      display:grid;
      gap:.75rem;
      grid-template-columns: 1fr;
    }
    .rel{
      display:grid;
      grid-template-columns: 92px 1fr;
      gap:.8rem;
      align-items:center;
      border-radius: 18px;
      border:1px solid rgba(12,34,51,.12);
      background: rgba(245,247,250,.60);
      padding:.65rem;
      transition: transform var(--t), border-color var(--t), box-shadow var(--t);
    }
    .rel:hover{
      transform: translateY(-2px);
      border-color: rgba(179,106,62,.30);
      box-shadow: 0 18px 44px rgba(10,20,29,.12);
    }
    .rel img{
      width:92px; height:72px;
      border-radius: 14px;
      object-fit:cover;
      filter: saturate(.78) contrast(1.06);
      border:1px solid rgba(12,34,51,.10);
    }
    .rel strong{
      display:block;
      text-transform:uppercase;
      letter-spacing:.12em;
      font-weight:880;
      color: var(--fjord);
      font-size:.9rem;
      line-height:1.2;
    }
    .rel span{
      display:block;
      color: var(--muted);
      margin-top:.25rem;
      font-size:.95rem;
    }
    @media (min-width: 768px){
      .relgrid{grid-template-columns: repeat(3, 1fr)}
      .rel{grid-template-columns: 1fr; align-content:start}
      .rel img{width:100%; height:auto; aspect-ratio: 16/10}
    }

    /* Contacts block */
    .contactswrap{
      padding: 1.6rem 0 2.2rem;
    }
    .contacts{
      border-radius: 24px;
      border:1px solid rgba(12,34,51,.12);
      background:
        radial-gradient(900px 340px at 80% 0%, rgba(169,198,218,.22), transparent 60%),
        linear-gradient(180deg, rgba(239,230,214,.62), rgba(245,247,250,.78));
      box-shadow: var(--shadow2);
      overflow:hidden;
    }
    .contacts .head{
      padding: 1.05rem 1rem .85rem;
      border-bottom:1px solid rgba(12,34,51,.10);
      background: linear-gradient(90deg, rgba(12,34,51,.06), rgba(179,106,62,.10), rgba(12,34,51,.04));
    }
    .contacts .head h2{
      margin:0;
      text-transform:uppercase;
      letter-spacing: var(--track2);
      font-weight: 900;
      color: var(--fjord);
      font-size: 1.2rem;
    }
    .contacts .grid{
      padding: 1rem;
      display:grid;
      grid-template-columns: 1fr;
      gap: 1rem;
    }
    .address{
      border-radius: 20px;
      border:1px solid rgba(12,34,51,.12);
      background: rgba(245,247,250,.62);
      padding: 1rem;
    }
    .address h3, .map h3{
      margin:0 0 .35rem;
      text-transform:uppercase;
      letter-spacing:.14em;
      font-weight:900;
      color: var(--fjord);
      font-size:.95rem;
    }
    .address p{margin:.3rem 0; color: var(--muted)}
    .prop{
      border-radius: 20px;
      border:1px solid rgba(12,34,51,.12);
      background:
        repeating-linear-gradient(45deg, rgba(12,34,51,.04), rgba(12,34,51,.04) 2px, transparent 2px, transparent 11px),
        rgba(245,247,250,.60);
      padding: 1rem;
    }
    .prop p{margin:0; color: rgba(12,34,51,.78)}
    .map{
      border-radius: 20px;
      border:1px solid rgba(12,34,51,.12);
      background: rgba(245,247,250,.62);
      padding: 1rem;
      overflow:hidden;
    }
    .map iframe{
      width:100%;
      height:240px;
      border:0;
      border-radius: 16px;
      filter: grayscale(.25) contrast(1.05) saturate(.85);
    }
    @media (min-width: 768px){
      .contacts .grid{grid-template-columns: 1.1fr .9fr}
      .map iframe{height: 320px}
    }
    @media (min-width: 1200px){
      .contacts .grid{grid-template-columns: 1.1fr .9fr}
    }

    /* Aside promos + CSS modal (no JS) */
    aside{
      padding: 1.2rem 0 2.2rem;
    }
    .aside-grid{
      display:grid;
      gap:1rem;
      grid-template-columns: 1fr;
      align-items:start;
    }
    .promos{
      border-radius: 24px;
      border:1px solid rgba(12,34,51,.12);
      background: rgba(245,247,250,.72);
      box-shadow: var(--shadow2);
      overflow:hidden;
    }
    .promos .head{
      padding: 1rem 1rem .8rem;
      border-bottom:1px solid rgba(12,34,51,.10);
      background: linear-gradient(90deg, rgba(169,198,218,.20), rgba(245,247,250,.30));
    }
    .promos .head h2{
      margin:0;
      text-transform:uppercase;
      letter-spacing: var(--track2);
      font-weight: 900;
      color: var(--fjord);
      font-size: 1.1rem;
    }
    .promolinks{
      list-style:none;
      margin:0;
      padding: .75rem;
      display:grid;
      gap:.55rem;
    }
    .promolinks li a{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:1rem;
      padding: .85rem .9rem;
      border-radius: 18px;
      border:1px solid rgba(12,34,51,.12);
      background: linear-gradient(180deg, rgba(245,247,250,.66), rgba(239,230,214,.44));
      color: var(--fjord);
      transition: transform var(--t), border-color var(--t), box-shadow var(--t), background var(--t);
      text-transform:uppercase;
      letter-spacing:.12em;
      font-weight: 900;
      font-size:.83rem;
    }
    .promolinks li a::after{
      content:"";
      width:10px; height:10px;
      border-right:1.5px solid rgba(12,34,51,.55);
      border-bottom:1.5px solid rgba(12,34,51,.55);
      transform: rotate(-45deg);
      opacity:.7;
      transition: transform var(--t), opacity var(--t), border-color var(--t);
    }
    .promolinks li a:hover{
      transform: translateY(-2px);
      border-color: rgba(179,106,62,.38);
      box-shadow: 0 18px 44px rgba(10,20,29,.12);
      background: linear-gradient(90deg, rgba(179,106,62,.10), rgba(169,198,218,.18));
    }
    .promolinks li a:hover::after{
      opacity:1;
      border-color: rgba(179,106,62,.70);
      transform: rotate(-45deg) translateX(2px);
    }

    /* Modal via :target */
    .modal{
      position:fixed;
      inset:0;
      display:none;
      place-items:center;
      padding:1rem;
      z-index:80;
    }
    .modal:target{display:grid}
    .overlay{
      position:absolute;
      inset:0;
      background: rgba(10,20,29,.66);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
    }
    .dialog{
      position:relative;
      width:min(560px, 100%);
      border-radius: 22px;
      border:1px solid rgba(245,247,250,.22);
      background:
        radial-gradient(900px 360px at 15% 0%, rgba(169,198,218,.20), transparent 60%),
        linear-gradient(180deg, rgba(245,247,250,.92), rgba(239,230,214,.58));
      box-shadow: 0 28px 90px rgba(0,0,0,.35);
      overflow:hidden;
    }
    .dialog .top{
      padding: 1rem 1rem .8rem;
      border-bottom:1px solid rgba(12,34,51,.10);
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap:1rem;
    }
    .dialog h2{
      margin:0;
      text-transform:uppercase;
      letter-spacing: var(--track2);
      font-weight: 920;
      color: var(--fjord);
      font-size: 1.1rem;
    }
    .dialog p{
      margin:.25rem 0 0;
      color: var(--muted);
      max-width: 60ch;
      font-size:.98rem;
    }
    .close{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      width:42px;height:42px;
      border-radius: 14px;
      border:1px solid rgba(12,34,51,.14);
      background: rgba(245,247,250,.62);
      color: var(--fjord);
      text-decoration:none;
      font-weight:900;
      transition: transform var(--t), border-color var(--t), box-shadow var(--t);
    }
    .close:hover{transform: translateY(-1px); border-color: rgba(179,106,62,.35); box-shadow: 0 14px 34px rgba(10,20,29,.14)}
    .dialog .body{padding: 1rem}
    .dialog form{box-shadow:none}

    /* Footer */
    footer{
      background:
        radial-gradient(900px 420px at 10% 0%, rgba(75,109,134,.22), transparent 60%),
        linear-gradient(180deg, rgba(10,20,29,.96), rgba(10,20,29,.88));
      color: rgba(245,247,250,.88);
      border-top:1px solid rgba(245,247,250,.10);
    }
    .foot{
      padding: 1.6rem 0 1.2rem;
      display:grid;
      gap:1rem;
    }
    .foot h2{
      margin:0;
      text-transform:uppercase;
      letter-spacing: var(--track2);
      font-weight: 900;
      font-size: 1.05rem;
      color: rgba(245,247,250,.92);
    }
    .foot .slogan{
      letter-spacing:.18em;
      text-transform:uppercase;
      font-weight:900;
      color: rgba(169,198,218,.92);
      margin:0;
      font-size:.88rem;
    }
    .foot p{
      margin:.35rem 0 0;
      color: rgba(245,247,250,.76);
      max-width: 78ch;
    }
    .social{
      display:flex;
      flex-wrap:wrap;
      gap:.6rem;
      align-items:center;
      margin-top:.35rem;
    }
    .social a{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      padding:.6rem .8rem;
      border-radius: 999px;
      border:1px solid rgba(245,247,250,.18);
      color: rgba(245,247,250,.88);
      background: rgba(245,247,250,.06);
      text-transform:uppercase;
      letter-spacing:.14em;
      font-weight:850;
      font-size:.76rem;
      transition: transform var(--t), border-color var(--t), background var(--t);
    }
    .social a:hover{
      transform: translateY(-2px);
      border-color: rgba(179,106,62,.55);
      background: rgba(179,106,62,.14);
      color: rgba(245,247,250,.95);
    }
    .copy{
      border-top:1px solid rgba(245,247,250,.10);
      padding: .85rem 0 1.2rem;
      color: rgba(245,247,250,.68);
      font-size:.92rem;
      letter-spacing:.02em;
    }

    /* Reduce motion */
    @media (prefers-reduced-motion: reduce){
      *{transition:none !important}
      .slides{animation:none !important}
    }