/*
Theme Name: ARCH
Theme URI: https://arch-joetsu-myoko.jp
Author: ARCH
Description: 上越・妙高のローカルメディア「ARCH」テーマ。記事、キッチンカー/飲食店、ARCH PAY加盟店の紹介、ライター(投稿者)プロフィールに対応。
Version: 1.0.0
Requires PHP: 7.4
Text Domain: arch-theme
*/

  :root{
    --snow:#FFFFFF;
    --snow-deep:#F2F2F0;
    --ink:#181614;
    --ink-soft:#6E6A61;
    --sea:#2B2B2B;
    --sea-deep:#100F0D;
    --lantern:#B08A3E;
    --lantern-soft:#E4D2A2;
    --pine:#57534A;
    --line:#DCD8CF;
    --card:#FFFFFF;
    --radius:18px;
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    background:var(--snow);
    color:var(--ink);
    font-family:'Zen Kaku Gothic New', sans-serif;
    -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3,.serif{ font-family:'Shippori Mincho', serif; }
  a{ color:inherit; text-decoration:none; }
  img{max-width:100%; display:block;}
  .wrap{ max-width:1120px; margin:0 auto; padding:0 24px; }
  .eyebrow{
    font-size:12px; letter-spacing:.22em; font-weight:700;
    color:var(--lantern); text-transform:uppercase;
  }

  /* ---------- header ---------- */
  header.site{
    position:sticky; top:0; z-index:50;
    background:rgba(246,243,236,.92);
    backdrop-filter:blur(6px);
    border-bottom:1px solid var(--line);
  }
  .nav-inner{
    display:flex; align-items:center; justify-content:space-between;
    padding:14px 24px; max-width:1120px; margin:0 auto;
    flex-wrap:nowrap;
  }
  .logo{
    display:flex; align-items:center; gap:38px;
    flex:none;
  }
  .logo img{ height:50px; width:auto; display:block; }
  .logo small{ font-family:'Zen Kaku Gothic New',sans-serif; font-size:10px; font-weight:700; color:var(--ink-soft); letter-spacing:.08em; border-left:1px solid var(--line); padding-left:12px;}
  nav.main{ display:flex; gap:28px; flex-wrap:nowrap; flex:none; margin-right:38px; }
  nav.main a{ white-space:nowrap; }
  nav.main a{
    font-size:14px; font-weight:700; color:var(--ink);
    position:relative; padding:4px 0;
  }
  nav.main a:hover{ color:var(--sea); }
  .nav-social{ display:flex; gap:14px; align-items:center; }
  .nav-social a{ width:45px; height:45px; border-radius:50%; border:1px solid var(--line);
    display:flex; align-items:center; justify-content:center; color:var(--sea-deep); font-size:13px;}
  .nav-social a:hover{ background:var(--sea-deep); color:#fff; border-color:var(--sea-deep);}

  /* ---------- header info: weather & clock ---------- */
  .header-info{
    display:flex; align-items:center; gap:14px;
    font-size:12px; font-weight:700; color:var(--ink-soft);
    letter-spacing:.03em; white-space:nowrap;
    margin-left:38px;
    margin-right:38px;
    flex:none;
  }
  .header-info .hi-weather{ display:flex; align-items:center; gap:6px; }
  .header-info .hi-weather svg{ width:16px; height:16px; flex:none; }
  .header-info .hi-temp{ color:var(--ink); font-weight:800; }
  .header-info .hi-divider{ width:1px; height:14px; background:var(--line); }
  .header-info .hi-clock{ font-variant-numeric:tabular-nums; color:var(--ink); font-weight:800; }
  .header-info .hi-date{ font-variant-numeric:tabular-nums; color:var(--ink-soft); font-weight:700; white-space:nowrap; }
  .header-info .hi-dow{
    display:inline-flex; align-items:center; justify-content:center;
    width:18px; height:18px; border-radius:50%; font-size:10px; font-weight:800;
    line-height:1; text-align:center; padding:0; box-sizing:border-box;
    background:var(--ink-soft); color:#fff; flex:none; margin-left:2px;
    font-family:'Zen Kaku Gothic New', sans-serif;
  }
  .header-info .hi-dow.sun{ background:var(--lantern); color:#241206; }
  .header-info .hi-dow.sat{ background:var(--lantern); color:#241206; }
  .header-info .hi-place{ color:var(--ink-soft); font-weight:600; transition:opacity .3s ease; }
  .header-info .hi-temp{ transition:opacity .3s ease; }
  @media (max-width:1020px){
    .header-info .hi-place{ display:none; }
    .header-info .hi-date{ display:none; }
  }
  @media (max-width:900px){
    .logo{ gap:20px; }
    .header-info{ margin-left:16px; margin-right:16px; }
    nav.main{ margin-right:16px; }
  }
  @media (max-width:640px){
    .header-info{ display:none; }
    .nav-inner{ padding:10px 14px; }
    .logo{ gap:10px; }
    .logo img{ height:34px; }
    .logo small{ display:none; }
    .nav-social{ gap:6px; }
    .nav-social a{ width:34px; height:34px; font-size:11px; }
    .lang-toggle button{ padding:6px 8px; font-size:10px; }
  }
  nav.main{ display:none; }
  .menu-btn{ display:block; }

  /* ---------- hamburger button ---------- */
  .hamburger{
    width:44px; height:44px; border-radius:50%;
    border:1px solid var(--line); background:transparent;
    display:flex; align-items:center; justify-content:center;
    cursor:pointer; padding:0; position:relative; z-index:120;
  }
  .hamburger span{
    position:absolute; width:18px; height:2px; background:var(--ink);
    border-radius:2px; transition:transform .25s ease, opacity .2s ease, top .25s ease;
  }
  .hamburger span:nth-child(1){ top:16px; }
  .hamburger span:nth-child(2){ top:22px; }
  .hamburger span:nth-child(3){ top:28px; }
  .hamburger.is-open span:nth-child(1){ top:22px; transform:rotate(45deg); }
  .hamburger.is-open span:nth-child(2){ opacity:0; }
  .hamburger.is-open span:nth-child(3){ top:22px; transform:rotate(-45deg); }

  /* ---------- mobile global menu ---------- */
  .mobile-menu{
    position:fixed; inset:0; z-index:100;
    visibility:hidden; opacity:0;
    transition:opacity .25s ease, visibility .25s ease;
  }
  .mobile-menu.is-open{ visibility:visible; opacity:1; }
  .mobile-menu-overlay{
    position:absolute; inset:0; background:rgba(16,15,13,.55);
  }
  .mobile-menu-panel{
    position:absolute; inset:0; height:100%; width:100%;
    background:var(--snow);
    padding:110px 8vw 48px; display:flex; flex-direction:column; gap:36px;
    transform:translateY(-100%); transition:transform .35s ease;
    overflow-y:auto;
  }
  .mobile-menu.is-open .mobile-menu-panel{ transform:translateY(0); }
  .mobile-menu-top{ display:flex; flex-direction:row; gap:6vw; }
  .mobile-menu-links{ display:flex; flex-direction:column; flex:1 1 auto; min-width:0; }
  .mobile-menu nav{ display:flex; flex-direction:column; gap:6px; max-width:640px; }
  .mobile-menu nav ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; }
  .mobile-menu nav li{ list-style:none; margin:0; padding:0; }
  .mobile-menu nav a{
    display:block;
    font-family:'Shippori Mincho', serif; font-size:clamp(13px,2vw,20px); font-weight:600;
    padding:22px 0; border-bottom:1px solid var(--line); color:var(--ink);
  }
  .mobile-menu nav a:hover{ color:var(--lantern); }
  .mobile-menu .nav-social{ margin-top:28px; }
  .mobile-menu-photo{
    flex:0 0 60%; max-width:60%; border-radius:var(--radius); overflow:hidden;
    align-self:flex-start; border:1px solid var(--line);
  }
  .mobile-menu-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
  .mobile-menu-caption{
    margin-top:14px !important; font-size:12.5px !important; color:var(--ink-soft);
    letter-spacing:.03em; line-height:1.7; text-align:center;
  }
  .mobile-menu-ads{ border-top:1px solid var(--line); padding-top:28px; }
  .mobile-menu-ads .ad-slot-grid{ max-width:none; width:100%; }
  @media (max-width:760px){
    .mobile-menu-top{ flex-direction:column; gap:28px; }
    .mobile-menu-photo{ flex:none; max-width:60%; max-height:60vh; align-self:center; }
  }

  /* ---------- hero ---------- */
  .hero{
    position:relative;
    overflow:hidden;
    min-height:800px !important;
    background:
      linear-gradient(180deg, rgba(12,11,10,.55) 0%, rgba(16,15,13,.72) 55%, rgba(16,15,13,.88) 100%),
      #1c1a17;
    background-size:cover;
    background-position:center;
    color:#fff;
    border-bottom:1px solid var(--line);
  }
  .hero video.hero-bg-video{
    position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;
  }
  .hero-lanterns{
    position:absolute; inset:0; display:flex; align-items:flex-end; justify-content:space-around;
    padding:0 4% 0; opacity:.5; pointer-events:none;
  }
  .lantern-dome{
    width:64px; height:64px;
    background:radial-gradient(circle at 50% 35%, var(--lantern-soft), var(--lantern) 60%, transparent 75%);
    border-radius:50% 50% 0 0;
    filter: blur(0.3px);
  }
  .hero-inner{
    position:relative; z-index:2;
    min-height:800px !important;
    padding:88px 24px; max-width:1120px; margin:0 auto;
    display:flex !important; flex-direction:column; justify-content:center;
    box-sizing:border-box;
  }
  .hero-inner > div{ max-width:640px; }
  .hero-inner .eyebrow{ color:var(--lantern-soft); }
  .hero-tags{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:16px; }
  .hero-tags a{
    font-size:10.5px; font-weight:800; letter-spacing:.05em; color:#241206; background:var(--lantern);
    padding:4px 12px; border-radius:999px;
  }
  .hero-tags a:hover{ background:var(--lantern-soft); }
  .hero h1{
    font-size:34px; line-height:1.4; font-weight:800; margin:14px 0 20px;
    color:#fff;
  }
  .hero h1 em{ font-style:normal; color:var(--lantern-soft); }
  .hero p.lead{
    font-size:15px; line-height:1.9; color:#E4E1D8; max-width:46ch; margin:0 0 28px;
  }
  .cta{
    display:inline-flex; align-items:center; gap:10px;
    background:var(--lantern); color:#241206; font-weight:900; font-size:14px;
    padding:14px 26px; border-radius:999px; border:none; cursor:pointer;
  }
  .cta:hover{ background:var(--lantern-soft); }

  /* ---------- section shell ---------- */
  section{ padding:64px 0; }
  .sec-head{
    display:flex; align-items:baseline; justify-content:space-between;
    border-width:0 0 2px 0 !important; border-style:solid !important; border-color:var(--ink) !important;
    border-top:none !important; border-left:none !important; border-right:none !important;
    padding-bottom:16px; margin-bottom:32px;
  }
  .sec-head h2{ font-size:26px; font-weight:800; margin:6px 0 0;}
  .sec-head .more{ font-size:12px; font-weight:700; color:var(--sea); white-space:nowrap; }
  .sec-head .more:hover{ text-decoration:underline; }

  /* ---------- pickup ---------- */
  .pickup-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
  .pickup-card{
    background:var(--card); border-radius:var(--radius); overflow:hidden;
    border:1px solid var(--line); transition:transform .18s ease, box-shadow .18s ease;
  }
  .pickup-card:hover{ transform:translateY(-4px); box-shadow:0 16px 30px -18px rgba(28,43,58,.35);}
  .thumb{
    aspect-ratio:4/3; position:relative;
  }
  .thumb.snow{ background:linear-gradient(135deg,#EFEDE7,#D9D5CB 55%,#B9B4A7); }
  .thumb.sea{ background:linear-gradient(135deg,#100F0D,#2B2B2B 55%,#4A4741); }
  .thumb.pine{ background:linear-gradient(135deg,#3A372F,#57534A 55%,#7A756A); }
  .thumb.lantern{ background:linear-gradient(135deg,#6E551E,#8F6E2C 55%,var(--lantern)); }
  .thumb .glow{ position:absolute; width:46px; height:46px; border-radius:50% 50% 0 0;
     background:radial-gradient(circle at 50% 35%, #fff9ec, var(--lantern-soft) 60%, transparent 78%);
     bottom:16px; right:18px; opacity:.9;}
  .badge{
    position:absolute; top:12px; left:12px; background:var(--ink); color:#fff;
    font-size:10px; font-weight:800; letter-spacing:.1em; padding:5px 10px; border-radius:999px;
  }
  .ad-badge{
    position:absolute; top:12px; right:12px; background:#1B4332; color:#fff;
    font-size:10px; font-weight:900; letter-spacing:.08em; padding:5px 10px; border-radius:999px;
  }
  .pickup-card .body{ padding:18px 18px 20px; }
  .tag{
    display:inline-block; font-size:11px; font-weight:700; color:var(--sea);
    border:1px solid var(--sea); border-radius:999px; padding:3px 10px; margin-bottom:10px;
  }
  .pickup-card h3, .card h3{ font-size:16px; line-height:1.6; font-weight:700; margin:0 0 10px; }
  .pickup-card h3 a, .card h3 a, .rank-list h3 a{ color:inherit; }
  .pickup-card:hover h3 a, .card:hover h3 a{ color:var(--lantern); }
  .meta{ display:flex; align-items:center; gap:8px; font-size:12px; color:var(--ink-soft); }
  .meta .dot{ width:22px;height:22px;border-radius:50%; background:var(--snow-deep); border:1px solid var(--line); flex:none; }

  /* ---------- new arrivals grid ---------- */
  .grid-6{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px 22px; }
  .card{ }
  .card .thumb{ border-radius:14px; margin-bottom:14px; }

  /* ---------- feature (matome) ---------- */
  .feature-row{ display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:22px; }
  .feature-main{ position:relative; border-radius:var(--radius); overflow:hidden; min-height:340px;
    background:var(--snow-deep); border:1px solid var(--line); display:flex; flex-direction:column; justify-content:flex-end; }
  .feature-main .snowpattern{ position:absolute; inset:0; opacity:.5;
    background-image: radial-gradient(rgba(0,0,0,.12) 1px, transparent 1.5px);
    background-size:22px 22px; }
  .feature-main .content{ position:relative; z-index:2; padding:26px; color:var(--ink); }
  .feature-main .tag.on-dark{ color:var(--ink); border-color:var(--ink); }
  .feature-main h3{ color:var(--ink); font-size:20px; margin:10px 0 0; }
  .feature-side{ display:flex; flex-direction:column; gap:22px; }
  .feature-side .thumb{ border-radius:14px; min-height:150px; }
  .feature-side .body{ padding:14px 2px 0; }

  /* ---------- explore (area/genre) ---------- */
  /* ---------- banner ad ---------- */
  .banner-ad{ padding:0 0 64px; }
  .banner-ad-link{
    display:block; overflow:hidden;
    transition:opacity .2s ease;
  }
  .banner-ad-link:hover{ opacity:.85; }
  .banner-ad-link img{ width:100%; height:auto; display:block; }

  /* ---------- kitchen car promo ---------- */
  .kc-promo{
    position:relative; border-radius:var(--radius); overflow:hidden;
    display:grid; grid-template-columns:1fr 1fr; min-height:260px;
  }
  .kc-promo-visual{
    background:linear-gradient(150deg,#6E551E,#8F6E2C 45%,var(--lantern));
    position:relative; overflow:hidden;
  }
  .kc-promo-visual .glow{
    position:absolute; width:180px; height:180px; border-radius:50%;
    background:radial-gradient(circle at 50% 40%, #fff9ec, var(--lantern-soft) 55%, transparent 75%);
    bottom:-50px; right:-30px; opacity:.85;
  }
  .kc-promo-visual .glow2{
    position:absolute; width:90px; height:90px; border-radius:50%;
    background:radial-gradient(circle at 50% 40%, #fff9ec, var(--lantern-soft) 55%, transparent 75%);
    top:20px; left:30px; opacity:.6;
  }
  .kc-promo-body{
    background:var(--ink); color:#fff; padding:40px 44px; display:flex; flex-direction:column; justify-content:center;
  }
  .kc-promo-body .eyebrow{ color:var(--lantern-soft); }
  .kc-promo-body h2{ font-size:22px; margin:10px 0 14px; color:#fff; }
  .kc-promo-body p{ font-size:13.5px; line-height:1.9; color:#D6D2C8; margin:0 0 22px; }
  .kc-promo-btn{
    display:inline-flex; align-items:center; gap:8px; align-self:flex-start;
    background:var(--lantern); color:#241206; font-weight:900; font-size:13px;
    padding:13px 24px; border-radius:999px; white-space:nowrap;
  }
  @media (max-width:760px){
    .kc-promo{ grid-template-columns:1fr; }
    .kc-promo-visual{ min-height:140px; }
    .kc-promo-body{ padding:32px 28px; }
  }

  .explore{ background:var(--snow-deep); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
  .explore-grid{ display:grid; grid-template-columns:1fr 1fr; gap:40px; }
  .chip-group h4{ font-size:13px; letter-spacing:.05em; color:var(--ink-soft); margin:0 0 14px; font-weight:700;}
  .chips{ display:flex; flex-wrap:wrap; gap:10px; }
  .chip{
    font-size:13px; font-weight:700; padding:9px 16px; border-radius:999px;
    background:#fff; border:1px solid var(--line); color:var(--ink);
  }
  .chip:hover{ border-color:var(--sea); color:var(--sea); }

  /* ---------- ranking ---------- */
  .rank-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; }
  .rank-list li{ display:flex; align-items:center; gap:18px; padding:16px 0; border-bottom:1px solid var(--line); }
  .rank-list li:first-child{ padding-top:0; }
  .rank-num{
    font-family:'Shippori Mincho',serif; font-weight:800; font-size:24px; color:var(--lantern);
    width:34px; flex:none; text-align:center;
  }
  .rank-thumb{ width:64px; height:64px; border-radius:10px; flex:none; }
  .rank-list h3{ font-size:14px; margin:0 0 6px; font-weight:700; }

  /* ---------- writers ---------- */
  .writer-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
  .writer-card{ text-align:center; display:block; }
  .writer-card:hover h4{ color:var(--lantern); }
  .avatar{ width:84px; height:84px; border-radius:50%; margin:0 auto 14px; position:relative; }
  .writer-card h4{ font-size:14px; font-weight:800; margin:0 0 4px; }
  .writer-card p{ font-size:12px; color:var(--ink-soft); margin:0; line-height:1.7; }

  /* ---------- about strip ---------- */
  .about-strip{
    background:var(--snow-deep);
    border:1px solid var(--line);
    color:var(--ink); border-radius:24px; padding:52px 48px;
    display:grid; grid-template-columns:1fr auto auto; gap:40px; align-items:center;
  }
  .about-strip h2{ font-size:24px; margin:10px 0 14px; }
  .about-strip p{ font-size:14px; line-height:2; color:var(--ink-soft); max-width:52ch; margin:0; }
  .about-cta{ background:var(--ink); color:#fff; font-weight:900; font-size:13px;
    padding:14px 24px; border-radius:999px; white-space:nowrap; }
  .about-goal{
    text-align:center; padding:0 8px; border-left:1px solid var(--line); border-right:1px solid var(--line);
  }
  .about-goal .eyebrow{ color:var(--lantern); }
  .about-goal .num{
    font-family:'Shippori Mincho',serif; font-weight:800; white-space:nowrap;
    font-size:34px; color:var(--ink); margin:6px 0 2px;
  }
  .about-goal .num small{ font-size:14px; font-weight:700; color:var(--ink-soft); margin-left:4px; }
  .about-goal p{ font-size:11px; color:var(--ink-soft); margin:0; max-width:none; }
  .about-goal-desc{
    margin-top:14px !important; font-size:11.5px !important; line-height:1.7;
    color:var(--ink-soft); max-width:15ch !important;
  }

  /* ---------- lang toggle ---------- */
  .lang-toggle{
    display:flex; align-items:center; border:1px solid var(--line); border-radius:999px;
    overflow:hidden; flex:none;
  }
  .lang-toggle button{
    appearance:none; border:none; background:transparent; cursor:pointer;
    font-family:'Zen Kaku Gothic New',sans-serif; font-size:11px; font-weight:800;
    letter-spacing:.04em; color:var(--ink-soft); padding:8px 12px;
  }
  .lang-toggle button.active{ background:var(--ink); color:#fff; }

  /* ---------- footer ---------- */
  /* ---------- ARCH PAY recruit ---------- */
  .pay-recruit{
    background:linear-gradient(160deg,#100F0D,#2B2B2B);
    color:#fff; border-radius:24px; padding:52px 48px;
    display:grid; grid-template-columns:1fr auto; gap:40px; align-items:center;
  }
  .pay-recruit .eyebrow{ color:var(--lantern-soft); }
  .pay-recruit h2{ font-size:24px; margin:10px 0 14px; color:#fff; }
  .pay-recruit h2 .pay-mark{
    display:inline-flex; align-items:center; gap:2px; font-family:'Zen Kaku Gothic New',sans-serif;
    font-weight:900; color:var(--lantern-soft); border:1.5px solid var(--lantern-soft);
    border-radius:6px; padding:2px 8px; font-size:16px; letter-spacing:.02em; vertical-align:middle;
  }
  .pay-recruit p{ font-size:14px; line-height:2; color:#D6D2C8; max-width:52ch; margin:0; }
  .pay-cta{ background:var(--lantern); color:#241206; font-weight:900; font-size:13px;
    padding:14px 26px; border-radius:999px; white-space:nowrap; }
  @media (max-width:900px){
    .pay-recruit{ grid-template-columns:1fr; text-align:left; }
  }

  /* ---------- ad slot ---------- */
  .ad-slot{ padding:32px 0; }
  .ad-slot-inner{
    border:none; border-radius:0;
    background:transparent;
    box-shadow:0 2px 8px rgba(16,15,13,.10);
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    text-align:center; gap:3px; padding:10px 16px;
    min-height:0; width:500px; height:120px; max-width:100%; box-sizing:border-box; color:var(--ink-soft);
  }
  .ad-slot-inner:hover{ background:var(--snow-deep); }
  .ad-slot-inner.ad-slot-filled{
    border:none; padding:0; overflow:hidden; display:block;
    min-height:0; height:auto;
    box-shadow:0 2px 8px rgba(16,15,13,.14);
  }
  .ad-slot-inner.ad-slot-filled img{ display:block; width:100%; height:auto; }
  .ad-slot-label{
    font-size:9px; font-weight:800; letter-spacing:.12em; color:var(--ink-soft);
    text-transform:uppercase;
  }
  .ad-slot-note{ font-size:11.5px; color:var(--ink-soft); }
  .ad-slot-size{ font-size:10px; color:#B0AB9E; }
  .ad-slot.leaderboard .ad-slot-inner{ min-height:120px; max-width:500px; margin:0 auto; }
  .ad-slot.leaderboard .ad-slot-inner.ad-slot-filled{ min-height:0; }
  .ad-slot-grid{
    display:grid; grid-template-columns:repeat(2, 500px); gap:10px;
    transition:opacity .15s ease; align-items:start; justify-content:start;
  }
  .ad-slot-grid .ad-slot-inner{ max-width:none; margin:0; width:100%; cursor:pointer; }
  @media (max-width:1100px){
    .ad-slot-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  }
  @media (max-width:600px){
    .ad-slot-grid{ grid-template-columns:1fr; }
  }
  .ad-slot.rectangle .ad-slot-inner{ min-height:280px; max-width:1100px; margin:0 auto; }

  footer{ background:#FFFFFF; color:var(--ink-soft); padding:56px 0 28px; margin-top:80px; border-top:1px solid var(--line); }
  .foot-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:32px; padding-bottom:36px; border-bottom:1px solid var(--line); }
  footer .logo{ color:var(--ink); }
  footer .logo img{ filter:none; }
  footer .logo small{ color:var(--ink-soft); border-left-color:var(--line); }
  footer p.lead{ font-size:13px; line-height:1.9; color:var(--ink-soft); margin:14px 0 0; max-width:none;}
  footer h5{ font-size:12px; letter-spacing:.1em; color:var(--ink-soft); margin:0 0 14px; }
  footer ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
  footer a{ font-size:13px; color:var(--ink); }
  footer a:hover{ color:var(--lantern); }
  .foot-bottom{ display:flex; justify-content:space-between; align-items:center; padding-top:22px; font-size:12px; color:var(--ink-soft); flex-wrap:wrap; gap:10px;}

  @media (max-width:900px){
    .pickup-grid, .grid-6{ grid-template-columns:1fr 1fr; }
    .feature-row{ grid-template-columns:1fr; }
    .explore-grid{ grid-template-columns:1fr; }
    .writer-grid{ grid-template-columns:1fr 1fr; }
    .about-strip{ grid-template-columns:1fr; text-align:left; }
    .about-goal{ border-left:none; border-right:none; border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:20px 0; text-align:left; display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; }
    .about-goal .num{ margin:0; }
    .about-goal-desc{ max-width:none !important; flex-basis:100%; margin-top:6px !important; }
    .foot-grid{ grid-template-columns:1fr 1fr; }
  }
  @media (max-width:600px){
    .pickup-grid, .grid-6, .writer-grid{ grid-template-columns:1fr; }
  }

  /* =====================================================================
     Gutenberg block styles for article writing (SWELL-style boxes, etc.)
     These classes are applied both on the live site and inside the block
     editor preview (via add_editor_style), so what you see while writing
     matches what visitors see.
     ===================================================================== */

  /* ---- Box designs (core/group block styles) ---- */
  .is-style-arch-box-soft{
    background:var(--snow-deep); border:1px solid var(--line); border-radius:var(--radius);
    padding:22px 26px; margin:24px 0;
  }
  .is-style-arch-box-gold{
    background:#fff; border:2px solid var(--lantern); border-radius:var(--radius);
    padding:22px 26px; margin:24px 0;
  }
  .is-style-arch-box-point{
    background:#fff; border-left:4px solid var(--lantern);
    padding:16px 22px; margin:24px 0;
  }
  .is-style-arch-box-warning{
    background:#FBEDEC; border:1px solid #C9564D; border-radius:10px;
    padding:18px 22px; margin:24px 0; color:#8A2E27;
  }
  .is-style-arch-box-soft p:last-child,
  .is-style-arch-box-gold p:last-child,
  .is-style-arch-box-point p:last-child,
  .is-style-arch-box-warning p:last-child{ margin-bottom:0; }

  /* ---- Button styles (core/buttons block styles) ---- */
  .is-style-arch-btn-gold .wp-block-button__link{
    background:var(--lantern) !important; color:#241206 !important; font-weight:900;
    border-radius:999px !important; padding:14px 28px !important; border:none;
  }
  .is-style-arch-btn-gold .wp-block-button__link:hover{ background:var(--lantern-soft) !important; }
  .is-style-arch-btn-outline .wp-block-button__link{
    background:transparent !important; color:var(--ink) !important; font-weight:800;
    border-radius:999px !important; padding:13px 27px !important; border:2px solid var(--ink) !important;
  }
  .is-style-arch-btn-outline .wp-block-button__link:hover{ background:var(--ink) !important; color:#fff !important; }

  /* ---- Speech bubble pattern ---- */
  .arch-bubble{ display:flex; gap:16px; align-items:flex-start; margin:28px 0; }
  .arch-bubble .avatar{
    width:56px; height:56px; border-radius:50%; flex:none;
    background:var(--snow-deep); border:1px solid var(--line);
  }
  .arch-bubble .bubble-text{
    position:relative; background:var(--snow-deep); border-radius:16px;
    padding:16px 20px; font-size:14.5px; line-height:1.9; color:var(--ink);
  }
  .arch-bubble .bubble-text::before{
    content:""; position:absolute; left:-8px; top:18px;
    border:8px solid transparent; border-right-color:var(--snow-deep);
  }
  .arch-bubble.right{ flex-direction:row-reverse; }
  .arch-bubble.right .bubble-text::before{
    left:auto; right:-8px; border-right-color:transparent; border-left-color:var(--snow-deep);
  }

  /* ---- Table of contents ([arch_toc] shortcode) ---- */
  .arch-toc{
    background:var(--snow-deep); border:1px solid var(--line); border-radius:var(--radius);
    padding:22px 26px; margin:28px 0;
  }
  .arch-toc-title{
    font-family:'Shippori Mincho',serif; font-weight:800; font-size:15px;
    color:var(--ink); margin:0 0 12px;
  }
  .arch-toc ol{ margin:0; padding-left:20px; font-size:14px; line-height:2.1; }
  .arch-toc li.toc-h3{ margin-left:18px; font-size:13px; }
  .arch-toc a{ color:var(--ink-soft); }
  .arch-toc a:hover{ color:var(--lantern); }