/* ===== Reset & Variables ===== */
  *, *::before, *::after { box-sizing: border-box; }
  :root{
    --paper:#f5f2eb;
    --ink:#141312;
    --sumi:#2b2a28;
    --mist:#e9e4db;
    --shade:#d9d3c7;
    --vermillion:#d6412b;
    --crimson:#a7261a;
    --jade:#2e7d6f;
    --gold:#c7a25b;
    --shadow: 0 6px 24px rgba(20,19,18,0.08);
    --radius: 12px;
    --trans: .4s cubic-bezier(.2,.6,.2,1);
  }
  html, body { height: 100%; }
  body{
    margin:0;
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
    color: var(--sumi);
    background: linear-gradient(180deg, var(--paper), #fff 50%, var(--paper));
    line-height:1.6;
    -webkit-font-smoothing: antialiased;
  }
  img{ max-width:100%; display:block; height:auto; }
  a{ color:inherit; text-decoration: none; }
  a:hover{ color: var(--vermillion); }
  :focus-visible{ outline: 2px dashed var(--vermillion); outline-offset: 3px; border-radius: 6px; }
  h1,h2,h3,h4{ font-family: ui-serif, Georgia, "Times New Roman", serif; margin:0 0 .5rem; line-height:1.25; color: var(--ink); }
  h1{ font-weight: 700; letter-spacing: .5px; }
  p{ margin:0 0 1rem; }
  .container{ width:min(1200px, 92vw); margin-inline:auto; }
  .flow > * + *{ margin-top: 1rem; }
  .eyebrow{ font-size:.8rem; letter-spacing:.2em; text-transform:uppercase; color: var(--jade); }
  .btn{
    display:inline-flex; align-items:center; gap:.5rem;
    padding:.7rem 1rem; border:1px solid color-mix(in srgb, var(--ink) 20%, transparent);
    border-radius: 999px; background: transparent; color:var(--ink);
    transition: var(--trans); position:relative;
  }
  .btn:hover{ border-color: var(--vermillion); box-shadow: 0 0 0 3px color-mix(in srgb, var(--vermillion) 20%, transparent) inset, 0 8px 24px rgba(0,0,0,0.08); transform: translateY(-2px); }
  .btn--accent{ border-color: var(--vermillion); color: #fff; background: linear-gradient(135deg, var(--vermillion), var(--crimson)); }
  .btn--accent:hover{ box-shadow: 0 0 0 3px color-mix(in srgb, var(--vermillion) 30%, transparent) inset, 0 10px 28px rgba(214,65,43,0.28); }
  .muted{ color: #6b6864; }

  /* ===== Header & Nav ===== */
  header{
    position: sticky; top:0; z-index: 1000;
    background: rgba(245,242,235,.9); backdrop-filter: saturate(180%) blur(8px);
    border-bottom:1px solid var(--shade);
  }
  .nav{
    display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.7rem 0;
  }
  .brand{
    display:flex; align-items:center; gap:.8rem; text-transform:uppercase; letter-spacing:.2em;
    font-weight:700; color:var(--ink);
  }
  .brand .mon{ width:34px; height:34px; border-radius:50%; background:
      radial-gradient(circle at 50% 50%, var(--vermillion) 0 38%, transparent 39%),
      conic-gradient(from -35deg at 50% 50%, var(--vermillion) 0 70deg, transparent 70deg 180deg, var(--vermillion) 180deg 250deg, transparent 250deg 360deg);
    outline:1px solid color-mix(in srgb, var(--vermillion) 30%, transparent);
    box-shadow: inset 0 0 0 2px #fff, 0 2px 10px rgba(0,0,0,.07);
  }
  nav[role="navigation"] ul{ list-style:none; display:flex; gap:1rem; margin:0; padding:0; }
  nav[role="navigation"] a{ padding:.5rem .7rem; border-radius:999px; transition: var(--trans); }
  nav[role="navigation"] a:hover{ background: var(--mist); }
  .nav-cta{ display:flex; align-items:center; gap:.6rem; }
  .burger-toggle{ display:none; }
  .burger{
    display:none; width:40px; height:40px; border:1px solid var(--shade); border-radius:8px; place-content:center; cursor:pointer; transition: var(--trans);
  }
  .burger span{ display:block; width:20px; height:2px; background:var(--ink); position:relative; }
  .burger span::before, .burger span::after{ content:""; position:absolute; left:0; width:20px; height:2px; background:var(--ink); transition: var(--trans); }
  .burger span::before{ top:-6px; } .burger span::after{ top:6px; }
  /* Mobile menu */
  @media (max-width:1199px){
    .burger{ display:grid; }
    nav[role="navigation"]{ position:absolute; inset: calc(100% + 1px) 0 auto 0; background:var(--paper); border-bottom:1px solid var(--shade); display:none; }
    nav[role="navigation"] ul{ flex-direction:column; gap:0; }
    nav[role="navigation"] li a{ display:block; border-radius:0; padding:1rem 1.2rem; border-top:1px solid var(--shade); }
    .burger-toggle:checked ~ nav[role="navigation"]{ display:block; }
    .burger-toggle:checked + label.burger span{ background:transparent; }
    .burger-toggle:checked + label.burger span::before{ transform: translateY(6px) rotate(45deg); }
    .burger-toggle:checked + label.burger span::after{ transform: translateY(-6px) rotate(-45deg); }
  }

  /* ===== HERO ===== */
  .hero{
    min-height: 100vh; display:grid; align-items:center; padding: clamp(1rem, 2vw, 2rem) 0;
  }
  .hero-wrap{ display:grid; gap:2rem; align-items:center; }
  .hero-head{
    display:grid; gap:1rem;
  }
  .hero-head h1{
    font-size: clamp(2rem, 2.6vw + 1rem, 3.6rem);
    font-variant: small-caps; letter-spacing:.02em;
  }
  .hero-sub{ font-size: clamp(1rem, .6vw + .9rem, 1.25rem); color:#494641; }
  .hero-cta{ display:flex; gap:.8rem; flex-wrap:wrap; }
  .hero-note{ font-size:.9rem; color:#6f6a62; }

  /* Slider */
  .slider{ position:relative; width:100%; max-height:600px; overflow:hidden; border-radius: var(--radius); border:1px solid var(--shade); box-shadow: var(--shadow); background:#000; }
  .slider input{ position:absolute; inset:auto; opacity:0; pointer-events:none; }
  .slides{ display:grid; grid-auto-flow:column; grid-auto-columns:100%; height: clamp(260px, 50vh, 600px); transition: transform var(--trans); }
  .slides figure{ margin:0; height:100%; position:relative; }
  .slides img{ width:100%; height:100%; object-fit: cover; filter: saturate(.85) contrast(1.05); }
  .slides figcaption{
    position:absolute; left:0; bottom:0; right:0;
    background: linear-gradient(180deg, transparent, rgba(0,0,0,.6));
    color:#fff; padding: 1.2rem 1rem; font-size: .95rem;
  }
  .dots{ position:absolute; left:50%; transform:translateX(-50%); bottom:.8rem; display:flex; gap:.5rem; }
  .dots label{ width:10px; height:10px; border-radius:50%; background: #ffffff80; cursor:pointer; border:1px solid #ffffffcc; transition: var(--trans); }
  #slide-1:checked ~ .slides{ transform: translateX(0); }
  #slide-2:checked ~ .slides{ transform: translateX(-100%); }
  #slide-3:checked ~ .slides{ transform: translateX(-200%); }
  #slide-1:checked ~ .dots label[for="slide-1"],
  #slide-2:checked ~ .dots label[for="slide-2"],
  #slide-3:checked ~ .dots label[for="slide-3"]{ background: var(--vermillion); border-color: var(--vermillion); }
  @media (min-width:1200px){
    .hero-wrap{ grid-template-columns: 1.1fr 1fr; }
  }

  /* ===== Sections (Cards) ===== */
  main{ display:block; }
  .section{ padding: 3rem 0; }
  .section-head{ display:flex; align-items:baseline; justify-content:space-between; gap:1rem; margin-bottom:1.2rem; }
  .grid{
    display:grid; gap:1rem;
    grid-template-columns: 1fr;
  }
  @media (min-width:768px){ .grid{ grid-template-columns: repeat(2, 1fr); } }
  @media (min-width:1200px){ .grid{ grid-template-columns: repeat(3, 1fr); gap:1.2rem; } }

  /* Section #1 style: paper cards, subtle lift */
  .s1{ background: linear-gradient(180deg, var(--paper), #fff); border-top:2px solid var(--vermillion); }
  .card{
    background:#fff; border:1px solid var(--shade); border-radius: var(--radius);
    overflow:hidden; box-shadow: var(--shadow); display:grid;
    transition: var(--trans);
  }
  .card:hover{ transform: translateY(-4px); box-shadow: 0 14px 40px rgba(0,0,0,.12); }
  .card-media{ aspect-ratio: 16/9; background:#000; }
  .card-body{ padding:1rem; display:grid; gap:.5rem; }
  .meta{ font-size:.85rem; color:#6a685f; display:flex; align-items:center; gap:.8rem; }
  .meta .dot{ width:4px; height:4px; background:#8a877d; border-radius:50%; display:inline-block; }

  /* Section #2 style: toned panels, denser */
  .s2{ background: linear-gradient(180deg, #f1ede4, var(--paper)); }
  .s2 .card{ background: #fefcf7; border-color:#e5ddcf; }
  .s2 .card-media::after{
    content:""; position:absolute; inset:0; box-shadow: inset 0 0 0 2px rgba(255,255,255,.2); pointer-events:none;
  }
  .s2 .card-media{ position:relative; }
  .s2 .card:hover{ border-color: var(--gold); box-shadow: 0 18px 46px rgba(199,162,91,.20); }
  .s2 .card h3{ color:#2a2a27; }

  /* Section #3 style: minimalist, outlined, subtle slide on hover */
  .s3{ background: linear-gradient(180deg, var(--paper), #f8f6f1); }
  .s3 .card{ background: transparent; border-style: dashed; }
  .s3 .card:hover{ transform: translateX(4px); background:#fff; }

  /* ===== Blog list ===== */
  .bloglist{ padding: 3rem 0 2rem; border-top:1px solid var(--shade); border-bottom:1px solid var(--shade); background: #fff; }
  .bloglist h2{ margin-bottom: .5rem; }
  .list{
    list-style:none; margin:0; padding:0; display:grid; gap:1rem;
  }
  .list li{
    display:grid; grid-template-columns: 92px 1fr; gap:1rem; padding: .8rem; border-left: 4px solid var(--vermillion);
    border-radius: 8px; background: linear-gradient(90deg, #fff, #fffdf9); border:1px solid var(--shade);
    transition: var(--trans);
  }
  .list li:hover{ transform: translateX(4px); box-shadow: var(--shadow); }
  .list img{ width:92px; height:72px; object-fit:cover; border-radius:6px; }

  /* ===== Center content + Article ===== */
  .content-wrap{ padding: 3rem 0; }
  .centered{ width:min(860px, 92vw); margin-inline:auto; }
  .lead-media{ margin: 1rem 0; border-radius: var(--radius); overflow:hidden; border:1px solid var(--shade); box-shadow: var(--shadow); }
  .rating{ margin:.6rem 0 1rem; padding:.6rem .8rem; background: #fff; border:1px dashed var(--gold); color:#3a372f; border-radius: 8px; display:inline-block; }
  hr.divider{ border:0; height:1px; background: linear-gradient(90deg, transparent, #cfc8bb, transparent); margin:1.4rem 0; }

  .article-body p{ text-align: justify; text-justify: inter-word; }
  .prevnext{ display:flex; justify-content:space-between; gap:1rem; padding:1rem 0; }
  .prevnext a{ padding:.6rem .8rem; border:1px solid var(--shade); border-radius: 8px; background:#fff; transition: var(--trans); }
  .prevnext a:hover{ border-color:var(--vermillion); transform: translateY(-2px); }

  /* ===== Comments ===== */
  .comments{ padding: 2rem 0; border-top:1px solid var(--shade); }
  .comments h3{ margin-bottom: .4rem; }
  .comment-form{ display:grid; gap:.8rem; }
  .comment-form input, .comment-form textarea{
    width:100%; border:1px solid var(--shade); border-radius:8px; padding:.7rem .8rem; background:#fff; transition: var(--trans);
  }
  .comment-form input:focus-visible, .comment-form textarea:focus-visible{ border-color: var(--vermillion); box-shadow: 0 0 0 4px color-mix(in srgb, var(--vermillion) 18%, transparent); }
  textarea{ min-height:120px; resize: vertical; }

  /* ===== Related ===== */
  .related{ padding: 2rem 0; border-top:1px solid var(--shade); }
  .related-grid{ display:grid; grid-template-columns:1fr; gap:1rem; }
  @media (min-width:768px){ .related-grid{ grid-template-columns:repeat(2,1fr); } }
  @media (min-width:1200px){ .related-grid{ grid-template-columns:repeat(4,1fr); } }
  .rel{ background:#fff; border:1px solid var(--shade); border-radius:10px; overflow:hidden; transition: var(--trans); }
  .rel:hover{ transform: translateY(-3px); box-shadow: var(--shadow); }
  .rel .txt{ padding:.7rem .8rem; font-size:.95rem; }

  /* ===== Contacts ===== */
  .contacts{ padding: 3rem 0; background: linear-gradient(180deg, #fff, var(--paper)); border-top:1px solid var(--shade); }
  .contacts-grid{ display:grid; gap:1.2rem; }
  .contacts .form input, .contacts .form textarea{
    width:100%; border:1px solid var(--shade); border-radius:10px; padding:.75rem .9rem; background:#fff; transition: var(--trans);
  }
  .contacts .form input:focus-visible, .contacts .form textarea:focus-visible{ border-color: var(--jade); box-shadow: 0 0 0 4px color-mix(in srgb, var(--jade) 20%, transparent); }
  .map{ border:1px solid var(--shade); border-radius: 12px; overflow:hidden; box-shadow: var(--shadow); }
  @media (min-width:768px){ .contacts-grid{ grid-template-columns: 1.2fr 1fr; align-items:start; } }

  /* ===== Aside: Promos & Modal (CSS only) ===== */
  aside{ background: #fff; border-top:1px solid var(--shade); padding:2rem 0; }
  .promos{ display:grid; grid-template-columns: 1fr; gap:.7rem; }
  @media (min-width:768px){ .promos{ grid-template-columns: repeat(4, 1fr); } }
  .promo{
    border:1px dashed var(--shade); border-radius:10px; padding:1rem; background: linear-gradient(135deg, #fff, #fffdfa);
    transition: var(--trans); text-align:center;
  }
  .promo:hover{ border-color: var(--gold); transform: translateY(-3px); box-shadow: var(--shadow); }

  /* Modal via :target */
  .modal-overlay{
    position:fixed; inset:0; background: rgba(0,0,0,.35);
    display:none; place-items:center; padding:1rem;
  }
  .modal{ width:min(560px, 92vw); background:#fff; border:1px solid var(--shade); border-radius: 14px; box-shadow: 0 30px 80px rgba(0,0,0,.2); padding:1rem; }
  .modal h3{ margin-bottom:.6rem; }
  .modal .close{ float:right; }
  #contact-modal:target{ display:grid; }

  /* ===== Footer ===== */
  footer{
    background: #10100f; color:#e8e5de; padding: 2.2rem 0 1.6rem; border-top: 2px solid var(--vermillion);
  }
  .foot-grid{ display:grid; gap:1rem; }
  .slogan{ font-size:1.2rem; color:#fff; }
  .about{ color:#c8c4bb; }
  .social{ display:flex; gap:.8rem; align-items:center; }
  .social a{ padding:.5rem .7rem; border:1px solid #3a3936; border-radius:999px; transition: var(--trans); color:#e8e5de; }
  .social a:hover{ border-color: var(--vermillion); color:#fff; box-shadow: 0 0 0 3px color-mix(in srgb, var(--vermillion) 20%, transparent) inset; }
  .copy{ margin-top:.6rem; color:#9b978f; font-size:.9rem; }
  @media (min-width:768px){ .foot-grid{ grid-template-columns: 1.3fr .9fr .8fr; align-items:start; } }