:root{
      /* Theme palette */
      --pine-950:#0b1f16;
      --pine-900:#10261b;
      --pine-800:#163425;
      --forest:#1f4a36;

      --celadon-100:#eef7f2;
      --celadon-200:#d8efe4;
      --celadon-300:#bfe2d2;
      --celadon-500:#71b7a0;

      --indigo-950:#0b1220;
      --indigo-900:#111c33;
      --indigo-700:#2a3b68;

      --ivory:#fbf7ef;        /* hanji ivory */
      --paper:#f6f1e7;
      --mist:#f1f5f4;

      --persimmon:#c54b3c;    /* seal red accent */
      --ink:#142133;
      --muted:#5b6a6b;

      --hairline: color-mix(in srgb, var(--indigo-700) 55%, transparent);

      --shadow-soft: 0 18px 45px rgba(11, 18, 32, .12);
      --shadow-inner: inset 0 1px 0 rgba(255,255,255,.55), inset 0 -1px 0 rgba(17, 28, 51, .08);

      --radius-lg: 22px;
      --radius-md: 16px;
      --radius-sm: 12px;

      --max: 1200px;

      --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Apple SD Gothic Neo", "Noto Sans KR", Arial, sans-serif;
      --serif: ui-serif, "Iowan Old Style", "Palatino Linotype", Palatino, "Noto Serif KR", Georgia, serif;

      --transition: 420ms cubic-bezier(.2,.8,.2,1);
    }

    *{ box-sizing:border-box; }
    html,body{ height:100%; }
    body{
      margin:0;
      font-family: var(--sans);
      color: var(--ink);
      background:
        radial-gradient(900px 600px at 15% 5%, rgba(113,183,160,.22), transparent 60%),
        radial-gradient(900px 600px at 85% 10%, rgba(42,59,104,.14), transparent 55%),
        linear-gradient(180deg, var(--ivory), var(--mist) 40%, var(--paper));
      line-height: 1.7;
      letter-spacing: .01em;
    }

    a{ color: inherit; text-decoration: none; }
    img{ max-width:100%; height:auto; display:block; }

    /* Accessibility */
    :focus-visible{
      outline: 2px solid color-mix(in srgb, var(--persimmon) 75%, white);
      outline-offset: 3px;
      border-radius: 10px;
    }

    /* Layout helpers */
    .wrap{
      width: min(var(--max), calc(100% - 2rem));
      margin-inline:auto;
    }
    .section-pad{
      padding: 3.25rem 0;
    }
    @media (min-width:768px){
      .section-pad{ padding: 4.5rem 0; }
    }
    @media (min-width:1200px){
      .section-pad{ padding: 5.25rem 0; }
    }

    /* Header */
    header{
      position: sticky;
      top: 0;
      z-index: 50;
      background:
        linear-gradient(180deg, rgba(251,247,239,.92), rgba(246,241,231,.76));
      backdrop-filter: blur(10px);
      border-bottom: 1px solid rgba(42,59,104,.12);
    }

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

    .brand{
      display:flex;
      align-items:baseline;
      gap:.75rem;
      min-width: 240px;
    }
    .brand .mark{
      width: 34px; height: 34px;
      border-radius: 999px;
      background:
        radial-gradient(10px 10px at 30% 35%, rgba(255,255,255,.75), transparent 60%),
        radial-gradient(20px 20px at 65% 65%, rgba(197,75,60,.22), transparent 55%),
        linear-gradient(145deg, rgba(113,183,160,.95), rgba(31,74,54,.9));
      box-shadow: 0 10px 22px rgba(11,18,32,.18), inset 0 1px 0 rgba(255,255,255,.35);
      border: 1px solid rgba(17,28,51,.18);
      position: relative;
    }
    .brand .mark::after{
      content:"";
      position:absolute;
      inset: 8px 6px 8px 10px;
      border-radius: 999px 999px 999px 999px;
      border: 1px solid rgba(17,28,51,.22);
      transform: rotate(-12deg);
      opacity:.55;
    }
    .brand .name{
      font-family: var(--serif);
      font-weight: 650;
      letter-spacing: .02em;
      font-size: 1.05rem;
      color: var(--indigo-950);
    }
    .brand .tag{
      font-size: .82rem;
      color: color-mix(in srgb, var(--muted) 80%, var(--indigo-900));
      letter-spacing: .08em;
      text-transform: uppercase;
    }

    /* Burger menu - pure CSS */
    .nav-toggle{
      position:absolute;
      inline-size:1px; block-size:1px;
      overflow:hidden;
      clip: rect(0 0 0 0);
      clip-path: inset(50%);
      white-space:nowrap;
      border:0;
      padding:0;
      margin:-1px;
    }

    .burger{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:.6rem;
      padding: .55rem .8rem;
      border-radius: 999px;
      border: 1px solid rgba(42,59,104,.18);
      background: rgba(251,247,239,.65);
      box-shadow: var(--shadow-inner);
      color: var(--indigo-900);
      cursor:pointer;
      user-select:none;
      transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition), background var(--transition);
    }
    .burger:hover{
      transform: translateY(-1px);
      border-color: rgba(197,75,60,.35);
      box-shadow: 0 12px 24px rgba(11,18,32,.12), var(--shadow-inner);
      background: rgba(238,247,242,.75);
    }

    .burger .lines{
      width: 22px; height: 14px; position:relative;
    }
    .burger .lines span{
      position:absolute; left:0; right:0;
      height: 1.6px;
      background: color-mix(in srgb, var(--indigo-900) 85%, var(--pine-800));
      border-radius: 999px;
      transition: transform var(--transition), top var(--transition), opacity var(--transition), background var(--transition);
    }
    .burger .lines span:nth-child(1){ top: 1px; }
    .burger .lines span:nth-child(2){ top: 6px; opacity: .9; }
    .burger .lines span:nth-child(3){ top: 11px; }

    .burger .label{
      font-size: .9rem;
      letter-spacing: .06em;
      text-transform: uppercase;
    }

    /* NAV: must contain only ul li a */
    nav{ position: relative; }
    nav ul{
      list-style:none;
      padding:0;
      margin:0;
      display:none;
      flex-direction:column;
      gap:.4rem;
      position:absolute;
      right:0;
      top: calc(100% + .75rem);
      width: min(92vw, 420px);
      background:
        linear-gradient(180deg, rgba(251,247,239,.92), rgba(246,241,231,.86));
      border: 1px solid rgba(42,59,104,.16);
      border-radius: var(--radius-md);
      box-shadow: 0 30px 60px rgba(11,18,32,.18);
      padding: .75rem;
      overflow: hidden;
    }
    nav ul::before{
      content:"";
      position:absolute;
      inset:-2px;
      background:
        radial-gradient(700px 180px at 20% 20%, rgba(113,183,160,.22), transparent 60%),
        radial-gradient(500px 160px at 90% 10%, rgba(42,59,104,.16), transparent 55%);
      opacity:.85;
      pointer-events:none;
    }
    nav li{ position: relative; z-index:1; }
    nav a{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:1rem;
      padding: .8rem .9rem;
      border-radius: 14px;
      border: 1px solid transparent;
      color: var(--indigo-950);
      transition: background var(--transition), border-color var(--transition), transform var(--transition);
      letter-spacing:.01em;
    }
    nav a:hover{
      background: rgba(238,247,242,.75);
      border-color: rgba(42,59,104,.16);
      transform: translateY(-1px);
    }
    nav a .u{
      text-decoration: underline;
      text-decoration-color: color-mix(in srgb, var(--indigo-700) 55%, transparent);
      text-underline-offset: 6px;
      text-decoration-thickness: 1px;
    }
    nav a:hover .u{
      text-decoration-color: color-mix(in srgb, var(--persimmon) 55%, var(--indigo-700));
    }

    /* Toggle open */
    #nav-toggle:checked ~ nav ul{ display:flex; }
    #nav-toggle:checked + label .lines span:nth-child(1){ top: 6px; transform: rotate(45deg); }
    #nav-toggle:checked + label .lines span:nth-child(2){ opacity: 0; }
    #nav-toggle:checked + label .lines span:nth-child(3){ top: 6px; transform: rotate(-45deg); }

    /* Desktop nav: show inline; burger hidden */
    @media (min-width:1200px){
      .burger{ display:none; }
      nav ul{
        display:flex !important;
        position: static;
        flex-direction: row;
        width:auto;
        padding:0;
        background: transparent;
        border:0;
        box-shadow:none;
        gap:.25rem;
      }
      nav ul::before{ content:none; }
      nav a{
        padding: .6rem .85rem;
        border-radius: 999px;
        background: transparent;
      }
      nav a:hover{
        background: rgba(238,247,242,.65);
      }
    }

    /* Header CTA row */
    .header-cta{
      display:flex;
      align-items:center;
      gap:.55rem;
    }
    .pill{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      padding:.58rem .95rem;
      border-radius: 999px;
      border: 1px solid rgba(42,59,104,.20);
      background: color-mix(in srgb, var(--celadon-200) 70%, var(--ivory));
      color: var(--indigo-950);
      box-shadow: 0 12px 24px rgba(11,18,32,.10), var(--shadow-inner);
      transition: transform var(--transition), box-shadow var(--transition), background var(--transition), border-color var(--transition), color var(--transition);
      white-space:nowrap;
    }
    .pill:hover{
      transform: translateY(-1px);
      border-color: color-mix(in srgb, var(--persimmon) 45%, rgba(42,59,104,.25));
      background: color-mix(in srgb, var(--celadon-300) 70%, white);
      box-shadow: 0 20px 45px rgba(11,18,32,.14), var(--shadow-inner);
    }
    .pill--ghost{
      background: rgba(251,247,239,.72);
    }
    .pill--seal{
      position:relative;
      padding-left: 1.2rem;
    }
    .pill--seal::before{
      content:"";
      width: 8px; height: 8px;
      border-radius: 999px;
      background: var(--persimmon);
      margin-right:.55rem;
      display:inline-block;
      box-shadow: 0 0 0 3px rgba(197,75,60,.14);
    }

    /* Modal (pure CSS via :target) */
    .modal{
      position: fixed;
      inset:0;
      display:none;
      align-items:center;
      justify-content:center;
      padding: 1.25rem;
      z-index: 80;
      background: rgba(11,18,32,.55);
    }
    .modal:target{ display:flex; }
    .modal__panel{
      width: min(720px, 100%);
      border-radius: var(--radius-lg);
      background:
        radial-gradient(900px 260px at 15% 10%, rgba(113,183,160,.20), transparent 65%),
        linear-gradient(180deg, rgba(251,247,239,.96), rgba(246,241,231,.94));
      border: 1px solid rgba(42,59,104,.20);
      box-shadow: 0 45px 90px rgba(0,0,0,.35);
      overflow:hidden;
      position: relative;
    }
    .modal__panel::after{
      content:"";
      position:absolute;
      inset:0;
      pointer-events:none;
      opacity:.22;
      background-image:
        repeating-linear-gradient(90deg, rgba(17,28,51,.06) 0 1px, transparent 1px 7px),
        repeating-linear-gradient(0deg, rgba(197,75,60,.05) 0 1px, transparent 1px 11px);
      mix-blend-mode: multiply;
    }
    .modal__head{
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap:1rem;
      padding: 1.1rem 1.1rem .2rem;
      position: relative;
      z-index:1;
    }
    .modal__title{
      margin:0;
      font-family: var(--serif);
      font-weight: 700;
      letter-spacing:.02em;
      color: var(--indigo-950);
      font-size: 1.25rem;
    }
    .modal__close{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      width: 42px;
      height: 42px;
      border-radius: 999px;
      border: 1px solid rgba(42,59,104,.20);
      background: rgba(251,247,239,.8);
      color: var(--indigo-950);
      box-shadow: var(--shadow-inner);
      transition: transform var(--transition), border-color var(--transition), background var(--transition);
      position: relative;
      z-index:2;
    }
    .modal__close:hover{
      transform: translateY(-1px);
      border-color: rgba(197,75,60,.35);
      background: rgba(238,247,242,.75);
    }
    .modal__body{
      padding: .35rem 1.1rem 1.2rem;
      position: relative;
      z-index:1;
    }
    .grid-form{
      display:grid;
      gap:.85rem;
      grid-template-columns: 1fr;
    }
    @media (min-width:768px){
      .grid-form{ grid-template-columns: 1fr 1fr; }
      .grid-form .full{ grid-column: 1 / -1; }
    }
    label{
      display:block;
      font-size:.9rem;
      color: color-mix(in srgb, var(--muted) 75%, var(--indigo-900));
      margin-bottom:.35rem;
    }
    input, select, textarea{
      width:100%;
      padding: .8rem .85rem;
      border-radius: 14px;
      border: 1px solid rgba(42,59,104,.20);
      background: rgba(255,255,255,.65);
      color: var(--indigo-950);
      box-shadow: var(--shadow-inner);
      transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
      font: inherit;
    }
    textarea{ min-height: 120px; resize: vertical; }
    input:focus, select:focus, textarea:focus{
      border-color: color-mix(in srgb, var(--celadon-500) 65%, var(--indigo-700));
      box-shadow: 0 0 0 4px rgba(113,183,160,.18), var(--shadow-inner);
      outline: none;
      background: rgba(255,255,255,.8);
    }
    .form-actions{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:.75rem;
      flex-wrap: wrap;
      margin-top: .75rem;
    }
    .btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      padding: .78rem 1.05rem;
      border-radius: 999px;
      border: 1px solid rgba(42,59,104,.24);
      background: color-mix(in srgb, var(--celadon-300) 75%, var(--ivory));
      color: var(--indigo-950);
      box-shadow: 0 18px 35px rgba(11,18,32,.12), var(--shadow-inner);
      transition: transform var(--transition), box-shadow var(--transition), background var(--transition), border-color var(--transition), color var(--transition);
      cursor:pointer;
    }
    .btn:hover{
      transform: translateY(-1px);
      border-color: color-mix(in srgb, var(--persimmon) 45%, rgba(42,59,104,.3));
      box-shadow: 0 24px 55px rgba(11,18,32,.16), 0 0 0 4px rgba(197,75,60,.08), var(--shadow-inner);
      background: color-mix(in srgb, var(--celadon-200) 60%, white);
    }
    .btn--ink{
      background: linear-gradient(180deg, rgba(17,28,51,.96), rgba(11,18,32,.92));
      color: var(--ivory);
      border-color: rgba(251,247,239,.18);
    }
    .btn--ink:hover{
      box-shadow: 0 26px 70px rgba(11,18,32,.28), 0 0 0 4px rgba(113,183,160,.10);
      border-color: rgba(113,183,160,.35);
      background: linear-gradient(180deg, rgba(42,59,104,.96), rgba(11,18,32,.94));
    }

    /* HERO */
    .hero{
      padding: 2.15rem 0 1.25rem;
    }
    .hero-grid{
      display:grid;
      gap: 1.25rem;
      grid-template-columns: 1fr;
      align-items: stretch;
    }
    @media (min-width:768px){
      .hero{ padding: 3rem 0 1.4rem; }
      .hero-grid{ gap: 1.6rem; }
    }
    @media (min-width:1200px){
      .hero-grid{
        grid-template-columns: 1.05fr .95fr;
        gap: 1.9rem;
      }
    }

    .hero-copy{
      position:relative;
      padding: 1.4rem 1.2rem;
      border-radius: var(--radius-lg);
      background:
        radial-gradient(1100px 340px at 10% 0%, rgba(113,183,160,.22), transparent 70%),
        radial-gradient(700px 260px at 80% 20%, rgba(42,59,104,.12), transparent 70%),
        linear-gradient(180deg, rgba(251,247,239,.95), rgba(246,241,231,.86));
      border: 1px solid rgba(42,59,104,.14);
      box-shadow: var(--shadow-soft);
      overflow:hidden;
    }
    .hero-copy::after{
      content:"";
      position:absolute;
      inset: -2px;
      background-image:
        repeating-linear-gradient(0deg, rgba(17,28,51,.06) 0 1px, transparent 1px 10px),
        repeating-linear-gradient(90deg, rgba(17,28,51,.05) 0 1px, transparent 1px 14px);
      opacity:.18;
      pointer-events:none;
      mix-blend-mode: multiply;
    }
    .hero-copy > *{ position:relative; z-index:1; }

    .kicker{
      display:flex;
      align-items:center;
      gap:.6rem;
      color: color-mix(in srgb, var(--muted) 70%, var(--indigo-900));
      font-size: .92rem;
      letter-spacing:.12em;
      text-transform: uppercase;
      margin:0 0 .7rem;
      white-space: nowrap;
    }
    .kicker::before{
      content:"";
      width: 26px;
      height: 1px;
      background: color-mix(in srgb, var(--indigo-700) 55%, transparent);
      border-radius:999px;
    }

    h1{
      margin:0 0 .85rem;
      font-family: var(--serif);
      font-size: clamp(1.9rem, 2.6vw + 1.1rem, 3.15rem);
      line-height: 1.12;
      letter-spacing:.015em;
      color: var(--indigo-950);
    }
    .hero-copy p{
      margin: 0 0 1.05rem;
      color: color-mix(in srgb, var(--muted) 88%, var(--indigo-900));
      max-width: 62ch;
      font-size: 1.02rem;
    }
    .hero-actions{
      display:flex;
      gap:.7rem;
      flex-wrap: wrap;
      align-items:center;
      margin-top: .9rem;
    }

    .hero-meta{
      margin-top: 1.1rem;
      display:grid;
      grid-template-columns: 1fr;
      gap:.6rem;
      padding-top: 1rem;
      border-top: 1px solid rgba(42,59,104,.12);
    }
    @media (min-width:768px){
      .hero-meta{
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }
    }
    .meta-chip{
      border-radius: 999px;
      padding: .55rem .8rem;
      background: rgba(238,247,242,.7);
      border: 1px solid rgba(42,59,104,.12);
      box-shadow: var(--shadow-inner);
      display:flex;
      align-items:center;
      gap:.55rem;
      color: var(--indigo-900);
      font-size: .92rem;
    }
    .meta-icon{
      width: 22px; height: 22px;
      border-radius: 999px;
      border: 1px solid rgba(42,59,104,.18);
      background: rgba(251,247,239,.7);
      display:grid;
      place-items:center;
      color: color-mix(in srgb, var(--indigo-700) 70%, var(--forest));
      flex: 0 0 auto;
    }
    .meta-icon svg{ width:14px; height:14px; display:block; }

    /* Slider */
    .slider{
      border-radius: var(--radius-lg);
      border: 1px solid rgba(42,59,104,.16);
      background: rgba(251,247,239,.7);
      box-shadow: var(--shadow-soft);
      overflow:hidden;
      position:relative;
      height: min(56vh, 560px);
      max-height: 600px;
    }
    @media (min-width:1200px){
      .slider{ height: min(62vh, 560px); }
    }
    .slides{
      display:flex;
      width: 400%;
      height: 100%;
      animation: slide 22s var(--transition) infinite;
    }
    .slide{
      width: 25%;
      position:relative;
      overflow:hidden;
    }
    .slide img{
      width:100%;
      height:100%;
      object-fit: cover;
      filter: saturate(.78) contrast(.98) brightness(.98);
      transform: scale(1.03);
    }
    .slide::after{
      content:"";
      position:absolute;
      inset:0;
      background:
        radial-gradient(800px 320px at 20% 20%, rgba(241,245,244,.35), transparent 55%),
        linear-gradient(180deg, rgba(11,18,32,.15), rgba(11,18,32,.38));
      pointer-events:none;
    }
    .slide-cap{
      position:absolute;
      left: 1rem;
      right: 1rem;
      bottom: 1rem;
      padding: .85rem .95rem;
      border-radius: 18px;
      background: rgba(246,241,231,.72);
      border: 1px solid rgba(42,59,104,.18);
      box-shadow: 0 18px 40px rgba(11,18,32,.22), var(--shadow-inner);
      color: var(--indigo-950);
      backdrop-filter: blur(10px);
    }
    .slide-cap strong{
      font-family: var(--serif);
      letter-spacing:.02em;
      font-size: 1.05rem;
      display:block;
      line-height: 1.25;
    }
    .slide-cap span{
      display:block;
      margin-top: .2rem;
      color: color-mix(in srgb, var(--muted) 85%, var(--indigo-900));
      font-size: .92rem;
    }
    @keyframes slide{
      0%, 18%{ transform: translateX(0%); }
      25%, 43%{ transform: translateX(-25%); }
      50%, 68%{ transform: translateX(-50%); }
      75%, 93%{ transform: translateX(-75%); }
      100%{ transform: translateX(0%); }
    }

    /* Sections: shared */
    .section-head{
      display:flex;
      flex-direction: column;
      gap:.35rem;
      margin-bottom: 1.2rem;
    }
    .section-head h2{
      margin:0;
      font-family: var(--serif);
      font-size: clamp(1.25rem, 1.2vw + 1rem, 1.85rem);
      letter-spacing:.02em;
      color: var(--indigo-950);
    }
    .section-head p{
      margin:0;
      max-width: 75ch;
      color: color-mix(in srgb, var(--muted) 88%, var(--indigo-900));
    }

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

    .card{
      border-radius: var(--radius-lg);
      border: 1px solid rgba(42,59,104,.14);
      overflow:hidden;
      background: rgba(251,247,239,.78);
      box-shadow: 0 18px 45px rgba(11,18,32,.10);
      transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition), background var(--transition);
      position:relative;
    }
    .card::before{
      content:"";
      position:absolute;
      inset:0;
      pointer-events:none;
      opacity:.22;
      background-image:
        repeating-linear-gradient(0deg, rgba(17,28,51,.06) 0 1px, transparent 1px 12px);
      mix-blend-mode:multiply;
    }
    .card:hover{
      transform: translateY(-3px);
      border-color: rgba(197,75,60,.22);
      box-shadow: 0 28px 70px rgba(11,18,32,.14);
    }
    .card-media{
      position:relative;
      aspect-ratio: 16 / 10;
      overflow:hidden;
      border-bottom: 1px solid rgba(42,59,104,.12);
      background: rgba(17,28,51,.06);
    }
    .card-media img{
      width:100%;
      height:100%;
      object-fit:cover;
      filter: saturate(.78) contrast(.98) brightness(1.0);
      transition: transform 600ms cubic-bezier(.2,.8,.2,1), filter 600ms cubic-bezier(.2,.8,.2,1);
    }
    .card:hover .card-media img{
      transform: scale(1.05);
      filter: saturate(.86) contrast(1.0) brightness(1.02);
    }
    .card-body{
      padding: 1rem 1rem 1.05rem;
      position:relative;
      z-index:1;
    }
    .card-tag{
      display:inline-flex;
      align-items:center;
      gap:.5rem;
      font-size:.86rem;
      letter-spacing:.10em;
      text-transform: uppercase;
      color: color-mix(in srgb, var(--muted) 75%, var(--indigo-900));
      margin-bottom: .45rem;
    }
    .seal-dot{
      width: 8px; height: 8px;
      border-radius: 999px;
      background: color-mix(in srgb, var(--persimmon) 92%, var(--indigo-700));
      box-shadow: 0 0 0 3px rgba(197,75,60,.12);
    }
    .card h3{
      margin: 0 0 .4rem;
      font-family: var(--serif);
      font-size: 1.12rem;
      line-height: 1.25;
      letter-spacing:.02em;
      color: var(--indigo-950);
    }
    .card p{
      margin: 0 0 .85rem;
      color: color-mix(in srgb, var(--muted) 90%, var(--indigo-900));
    }
    .card a.more{
      display:inline-flex;
      align-items:center;
      gap:.55rem;
      font-size:.95rem;
      color: var(--indigo-900);
      padding-bottom: .15rem;
      border-bottom: 1px solid color-mix(in srgb, var(--indigo-700) 40%, transparent);
      transition: color var(--transition), border-color var(--transition), transform var(--transition);
    }
    .card a.more:hover{
      color: color-mix(in srgb, var(--indigo-900) 80%, var(--persimmon));
      border-color: color-mix(in srgb, var(--persimmon) 60%, var(--indigo-700));
      transform: translateX(2px);
    }

    /* Section individuality */
    .tone-1{
      background:
        radial-gradient(900px 260px at 15% 15%, rgba(113,183,160,.18), transparent 60%),
        linear-gradient(180deg, rgba(238,247,242,.55), rgba(246,241,231,.2));
      border-top: 1px solid rgba(42,59,104,.10);
      border-bottom: 1px solid rgba(42,59,104,.10);
    }
    .tone-1 .card{
      background: rgba(238,247,242,.62);
      border-color: rgba(31,74,54,.14);
    }
    .tone-1 .card:hover{
      border-color: rgba(197,75,60,.26);
      box-shadow: 0 28px 70px rgba(16,38,27,.18);
    }

    .tone-2{
      background:
        radial-gradient(1000px 340px at 80% 0%, rgba(42,59,104,.14), transparent 60%),
        linear-gradient(180deg, rgba(251,247,239,.65), rgba(241,245,244,.45));
    }
    .tone-2 .cards{ gap: 1.1rem; }
    .tone-2 .card{
      background: rgba(251,247,239,.82);
      border-color: rgba(42,59,104,.16);
    }
    .tone-2 .card:hover{
      transform: translateY(-4px) rotate(-.05deg);
    }

    .tone-3{
      background:
        radial-gradient(900px 260px at 20% 20%, rgba(197,75,60,.10), transparent 60%),
        radial-gradient(900px 260px at 85% 40%, rgba(113,183,160,.14), transparent 65%),
        linear-gradient(180deg, rgba(246,241,231,.72), rgba(238,247,242,.35));
      border-top: 1px solid rgba(42,59,104,.10);
    }
    .tone-3 .card{
      background: rgba(246,241,231,.86);
      border-color: rgba(42,59,104,.14);
    }
    .tone-3 .card:hover{
      border-color: rgba(197,75,60,.28);
      box-shadow: 0 30px 75px rgba(11,18,32,.16);
    }

    /* Blog list block */
    .blog-block{
      padding: 3.25rem 0;
    }
    .blog-panel{
      border-radius: var(--radius-lg);
      border: 1px solid rgba(42,59,104,.16);
      background:
        radial-gradient(900px 240px at 15% 10%, rgba(113,183,160,.18), transparent 60%),
        linear-gradient(180deg, rgba(251,247,239,.92), rgba(246,241,231,.88));
      box-shadow: var(--shadow-soft);
      overflow:hidden;
    }
    .blog-panel header{
      position: static;
      background: transparent;
      border-bottom: 1px solid rgba(42,59,104,.12);
      backdrop-filter: none;
      padding: 1.1rem 1.15rem;
    }
    .blog-panel header h2{
      margin:0;
      font-family: var(--serif);
      letter-spacing:.02em;
      font-size: 1.4rem;
    }
    .blog-panel header p{
      margin:.35rem 0 0;
      color: color-mix(in srgb, var(--muted) 88%, var(--indigo-900));
    }
    .blog-list{
      list-style:none;
      padding: .4rem;
      margin:0;
      display:grid;
      gap: .55rem;
    }
    .blog-list li{
      background: rgba(238,247,242,.55);
      border: 1px solid rgba(42,59,104,.12);
      border-radius: 18px;
      overflow:hidden;
      transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition), background var(--transition);
    }
    .blog-list li:hover{
      transform: translateY(-2px);
      border-color: rgba(197,75,60,.24);
      background: rgba(238,247,242,.72);
      box-shadow: 0 22px 55px rgba(11,18,32,.12);
    }
    .blog-list a{
      display:grid;
      grid-template-columns: 110px 1fr;
      gap: .9rem;
      align-items:center;
      padding: .75rem;
    }
    .blog-thumb{
      border-radius: 14px;
      aspect-ratio: 4 / 3;
      overflow:hidden;
      border: 1px solid rgba(42,59,104,.14);
      background: rgba(17,28,51,.06);
    }
    .blog-thumb img{
      width:100%;
      height:100%;
      object-fit: cover;
      filter: saturate(.78) contrast(.98);
      transition: transform 600ms cubic-bezier(.2,.8,.2,1);
    }
    .blog-list li:hover .blog-thumb img{ transform: scale(1.05); }
    .blog-text strong{
      display:block;
      font-family: var(--serif);
      letter-spacing:.02em;
      color: var(--indigo-950);
      line-height:1.25;
      margin-bottom:.15rem;
    }
    .blog-text span{
      display:block;
      color: color-mix(in srgb, var(--muted) 88%, var(--indigo-900));
      font-size: .95rem;
    }
    @media (min-width:768px){
      .blog-list{ padding: .75rem; }
      .blog-list a{ grid-template-columns: 140px 1fr; }
    }
    @media (min-width:1200px){
      .blog-list{
        grid-template-columns: 1fr 1fr;
        gap: .75rem;
      }
    }

    /* Content center */
    .content{
      padding: 3.25rem 0;
    }
    .content-center{
      width: min(860px, calc(100% - 2rem));
      margin-inline:auto;
      text-align:left;
    }
    .content-card{
      border-radius: var(--radius-lg);
      border: 1px solid rgba(42,59,104,.16);
      background:
        radial-gradient(1000px 320px at 10% 10%, rgba(113,183,160,.18), transparent 62%),
        linear-gradient(180deg, rgba(251,247,239,.96), rgba(246,241,231,.92));
      box-shadow: var(--shadow-soft);
      overflow:hidden;
    }
    .content-inner{
      padding: 1.15rem 1.15rem 1.25rem;
    }
    .center-image{
      width: 100%;
      max-width: 760px;
      margin: 1.15rem auto 0;
      border-radius: 22px;
      overflow:hidden;
      border: 1px solid rgba(42,59,104,.16);
      background: rgba(17,28,51,.06);
      box-shadow: 0 24px 70px rgba(11,18,32,.12);
    }
    .center-image img{
      width:100%;
      height:auto;
      display:block;
      filter: saturate(.78) contrast(.98);
    }
    .rating{
      margin: .8rem auto 0;
      max-width: 760px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap: .75rem;
      padding: .7rem .85rem;
      border-radius: 999px;
      border: 1px solid rgba(42,59,104,.16);
      background: rgba(238,247,242,.65);
      box-shadow: var(--shadow-inner);
      color: var(--indigo-950);
      font-size: .98rem;
    }
    .rating .seal{
      display:inline-flex;
      align-items:center;
      gap:.5rem;
      color: color-mix(in srgb, var(--indigo-900) 85%, var(--persimmon));
      letter-spacing:.08em;
      text-transform: uppercase;
      font-size: .86rem;
      white-space: nowrap;
    }
    .rating .seal::before{
      content:"";
      width: 9px; height: 9px;
      border-radius: 999px;
      background: var(--persimmon);
      box-shadow: 0 0 0 4px rgba(197,75,60,.12);
    }
    hr{
      border:0;
      height:1px;
      background: linear-gradient(90deg, transparent, rgba(42,59,104,.22), transparent);
      margin: 1.2rem 0;
    }

    /* Article typography */
    .post{
      padding: 1.1rem 1.15rem 1.25rem;
      border-top: 1px solid rgba(42,59,104,.12);
      position: relative;
    }
    .post h1{
      font-size: clamp(1.55rem, 1.6vw + 1.1rem, 2.2rem);
      margin: 0 0 .55rem;
    }
    .byline{
      display:flex;
      flex-wrap:wrap;
      gap:.65rem 1rem;
      color: color-mix(in srgb, var(--muted) 85%, var(--indigo-900));
      font-size: .95rem;
      margin-bottom: 1rem;
    }
    .chip{
      display:inline-flex;
      align-items:center;
      gap:.5rem;
      padding:.35rem .6rem;
      border-radius: 999px;
      border: 1px solid rgba(42,59,104,.14);
      background: rgba(251,247,239,.75);
      box-shadow: var(--shadow-inner);
    }
    .post p{
      margin: 0 0 .95rem;
      color: color-mix(in srgb, var(--muted) 92%, var(--indigo-900));
    }
    .callout{
      margin: 1.15rem 0;
      padding: 1rem 1rem;
      border-radius: var(--radius-lg);
      background: rgba(191,226,210,.45);
      border: 1px solid rgba(42,59,104,.16);
      box-shadow: var(--shadow-inner);
      position: relative;
    }
    .callout::before{
      content:"";
      position:absolute;
      left: 1rem;
      top: 1rem;
      width: 10px;
      height: 10px;
      border-radius: 999px;
      background: var(--persimmon);
      box-shadow: 0 0 0 4px rgba(197,75,60,.12);
    }
    .callout p{
      margin:0;
      padding-left: .75rem;
      color: color-mix(in srgb, var(--indigo-900) 80%, var(--pine-800));
    }

    /* Prev/Next */
    .pn{
      display:flex;
      justify-content:space-between;
      gap:.8rem;
      flex-wrap: wrap;
      padding: 0 1.15rem 1.2rem;
    }
    .pn a{
      flex: 1 1 240px;
      padding: .85rem .95rem;
      border-radius: 18px;
      border: 1px solid rgba(42,59,104,.16);
      background: rgba(238,247,242,.6);
      box-shadow: var(--shadow-inner);
      transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition), background var(--transition);
      color: var(--indigo-950);
      min-width: 240px;
    }
    .pn a:hover{
      transform: translateY(-2px);
      border-color: rgba(197,75,60,.22);
      box-shadow: 0 24px 55px rgba(11,18,32,.12), var(--shadow-inner);
      background: rgba(238,247,242,.75);
    }
    .pn small{
      display:block;
      color: color-mix(in srgb, var(--muted) 85%, var(--indigo-900));
      letter-spacing:.12em;
      text-transform: uppercase;
      margin-bottom:.25rem;
    }
    .pn strong{
      display:block;
      font-family: var(--serif);
      letter-spacing:.02em;
      line-height:1.25;
    }

    /* Comments */
    .comments{
      padding: 0 1.15rem 1.25rem;
    }
    .comments h2{
      margin: 0 0 .75rem;
      font-family: var(--serif);
      letter-spacing:.02em;
      font-size: 1.25rem;
    }
    .comments .empty{
      border-radius: var(--radius-lg);
      border: 1px dashed rgba(42,59,104,.30);
      background: rgba(251,247,239,.6);
      padding: 1rem;
      color: color-mix(in srgb, var(--muted) 88%, var(--indigo-900));
      margin-bottom: 1rem;
    }

    /* Related */
    .related{
      padding: 0 1.15rem 1.25rem;
    }
    .related h2{
      margin: 0 0 .9rem;
      font-family: var(--serif);
      letter-spacing:.02em;
      font-size: 1.25rem;
    }
    .related-grid{
      display:grid;
      grid-template-columns: 1fr;
      gap: .85rem;
    }
    @media (min-width:768px){
      .related-grid{ grid-template-columns: repeat(3, minmax(0,1fr)); }
    }
    .rel{
      border-radius: 18px;
      overflow:hidden;
      border: 1px solid rgba(42,59,104,.14);
      background: rgba(238,247,242,.55);
      box-shadow: var(--shadow-inner);
      transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
    }
    .rel:hover{
      transform: translateY(-2px);
      border-color: rgba(197,75,60,.22);
      box-shadow: 0 24px 55px rgba(11,18,32,.12);
    }
    .rel .thumb{
      aspect-ratio: 16/10;
      border-bottom: 1px solid rgba(42,59,104,.12);
      overflow:hidden;
      background: rgba(17,28,51,.06);
    }
    .rel .thumb img{
      width:100%;
      height:100%;
      object-fit:cover;
      filter: saturate(.78) contrast(.98);
      transition: transform 600ms cubic-bezier(.2,.8,.2,1);
    }
    .rel:hover .thumb img{ transform: scale(1.06); }
    .rel .txt{
      padding: .8rem .85rem;
    }
    .rel strong{
      font-family: var(--serif);
      letter-spacing:.02em;
      color: var(--indigo-950);
      line-height:1.25;
      display:block;
      margin-bottom:.2rem;
    }
    .rel span{
      color: color-mix(in srgb, var(--muted) 88%, var(--indigo-900));
      font-size: .95rem;
      display:block;
    }

    /* Contacts */
    .contacts{
      padding: 3.25rem 0;
    }
    .contact-grid{
      display:grid;
      grid-template-columns: 1fr;
      gap: 1rem;
      align-items:start;
    }
    @media (min-width:1200px){
      .contact-grid{ grid-template-columns: 1.1fr .9fr; gap: 1.25rem; }
    }
    .panel{
      border-radius: var(--radius-lg);
      border: 1px solid rgba(42,59,104,.16);
      background:
        radial-gradient(900px 260px at 10% 5%, rgba(113,183,160,.16), transparent 60%),
        linear-gradient(180deg, rgba(251,247,239,.96), rgba(246,241,231,.90));
      box-shadow: var(--shadow-soft);
      overflow:hidden;
    }
    .panel .pad{ padding: 1.1rem 1.15rem 1.2rem; }
    .panel h2{
      margin:0 0 .35rem;
      font-family: var(--serif);
      letter-spacing:.02em;
      font-size: 1.4rem;
      color: var(--indigo-950);
    }
    .panel p{
      margin:.35rem 0 0;
      color: color-mix(in srgb, var(--muted) 90%, var(--indigo-900));
    }
    address{
      font-style: normal;
      margin-top: .85rem;
      color: color-mix(in srgb, var(--muted) 90%, var(--indigo-900));
      border-top: 1px solid rgba(42,59,104,.12);
      padding-top: .85rem;
    }
    .map{
      aspect-ratio: 16 / 10;
      width:100%;
      border:0;
      display:block;
      filter: saturate(.85) contrast(.98);
    }

    /* Aside promos */
    aside{
      padding: 2.75rem 0 3.25rem;
      border-top: 1px solid rgba(42,59,104,.10);
      background:
        radial-gradient(900px 260px at 75% 15%, rgba(42,59,104,.12), transparent 60%),
        linear-gradient(180deg, rgba(241,245,244,.55), rgba(246,241,231,.15));
    }
    .aside-grid{
      display:grid;
      grid-template-columns: 1fr;
      gap: .8rem;
    }
    @media (min-width:768px){
      .aside-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
    }
    @media (min-width:1200px){
      .aside-grid{ grid-template-columns: repeat(4, minmax(0,1fr)); }
    }
    .promo{
      border-radius: 20px;
      border: 1px solid rgba(42,59,104,.16);
      background: rgba(251,247,239,.75);
      box-shadow: var(--shadow-inner);
      padding: 1rem 1rem;
      transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition), background var(--transition);
      display:block;
      min-height: 110px;
    }
    .promo:hover{
      transform: translateY(-2px);
      border-color: rgba(197,75,60,.22);
      box-shadow: 0 22px 55px rgba(11,18,32,.12), var(--shadow-inner);
      background: rgba(238,247,242,.65);
    }
    .promo strong{
      font-family: var(--serif);
      letter-spacing:.02em;
      display:block;
      color: var(--indigo-950);
      margin-bottom:.25rem;
    }
    .promo span{
      color: color-mix(in srgb, var(--muted) 90%, var(--indigo-900));
      display:block;
      font-size: .95rem;
    }

    /* Footer */
    footer{
      background:
        radial-gradient(900px 360px at 20% 10%, rgba(113,183,160,.12), transparent 65%),
        radial-gradient(700px 320px at 80% 0%, rgba(197,75,60,.10), transparent 60%),
        linear-gradient(180deg, var(--pine-900), var(--pine-950));
      color: color-mix(in srgb, var(--ivory) 92%, #fff);
      padding: 3rem 0 2.4rem;
      border-top: 1px solid rgba(238,247,242,.10);
      position:relative;
      overflow:hidden;
    }
    footer::before{
      content:"";
      position:absolute;
      inset:0;
      opacity:.20;
      background-image:
        repeating-linear-gradient(90deg, rgba(251,247,239,.07) 0 1px, transparent 1px 9px),
        repeating-linear-gradient(0deg, rgba(251,247,239,.05) 0 1px, transparent 1px 16px);
      pointer-events:none;
    }
    .footer-grid{
      display:grid;
      grid-template-columns: 1fr;
      gap: 1rem;
      position:relative;
      z-index:1;
    }
    @media (min-width:768px){
      .footer-grid{ grid-template-columns: 1.15fr .85fr; }
    }
    .slogan{
      font-family: var(--serif);
      letter-spacing:.03em;
      font-size: clamp(1.2rem, 1.2vw + 1rem, 1.65rem);
      margin:0 0 .6rem;
    }
    .about{
      margin:0;
      color: color-mix(in srgb, var(--ivory) 86%, rgba(255,255,255,.9));
      max-width: 70ch;
    }
    .social{
      display:flex;
      flex-wrap:wrap;
      gap:.5rem;
      align-items:center;
      justify-content:flex-start;
      margin-top: .9rem;
    }
    .social a{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      padding: .55rem .8rem;
      border-radius: 999px;
      border: 1px solid rgba(238,247,242,.18);
      color: rgba(251,247,239,.92);
      background: rgba(17,28,51,.22);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
      transition: transform var(--transition), border-color var(--transition), background var(--transition);
    }
    .social a:hover{
      transform: translateY(-1px);
      border-color: rgba(197,75,60,.35);
      background: rgba(113,183,160,.12);
    }
    .copyright{
      margin: 1.25rem 0 0;
      color: rgba(251,247,239,.72);
      font-size: .92rem;
      border-top: 1px solid rgba(238,247,242,.12);
      padding-top: 1rem;
    }
    .seal-mark{
      display:inline-block;
      margin-left: .35rem;
      width: 10px; height: 10px;
      border-radius: 2px;
      background: var(--persimmon);
      box-shadow: 0 0 0 4px rgba(197,75,60,.10);
      transform: rotate(8deg);
    }

    /* Reduced motion */
    @media (prefers-reduced-motion: reduce){
      *{ transition: none !important; animation: none !important; scroll-behavior:auto !important; }
    }