:root{
    --cream:#ece2d0;
    --cream-light:#f6efe2;
    --paper:#fbf7ee;
    --paper-edge:#e9ddc6;
    --gold:#a9835a;
    --gold-dark:#8a6a43;
    --gold-light:#c9a877;
    --blush:#eec3c6;
    --blush-dark:#e2a3a9;
    --blush-soft:#f6dee0;
    --ink:#332c22;
    --ink-soft:#5c5142;
    --ink-faint:#8a7c68;
  }

  *{box-sizing:border-box; margin:0; padding:0;}

  html{scroll-behavior:smooth;}

  body{
    font-family:'EB Garamond', Georgia, serif;
    background:
      radial-gradient(ellipse at 15% 10%, rgba(255,255,255,0.35), transparent 45%),
      radial-gradient(ellipse at 85% 90%, rgba(255,255,255,0.25), transparent 45%),
      var(--cream);
    color:var(--ink);
    overflow-x:hidden;
    position:relative;
  }

  /* subtle paper grain */
  body::before{
    content:"";
    position:fixed;
    inset:0;
    pointer-events:none;
    z-index:0;
    opacity:0.5;
    background-image:
      repeating-linear-gradient(0deg, rgba(0,0,0,0.012) 0px, rgba(0,0,0,0.012) 1px, transparent 1px, transparent 3px),
      repeating-linear-gradient(90deg, rgba(0,0,0,0.01) 0px, rgba(0,0,0,0.01) 1px, transparent 1px, transparent 3px);
  }

  h1, h2, h3, .display{
    font-family:'Playfair Display', 'Noto Serif JP', serif;
    font-weight:600;
    color:var(--gold-dark);
    letter-spacing:0.01em;
  }

  a{color:inherit; text-decoration:none;}

  .wrap{
    max-width:1120px;
    margin:0 auto;
    padding:0 32px;
    position:relative;
    z-index:1;
  }

  /* ---------- NAV ---------- */
  header.nav{
    position:relative;
    z-index:10;
    padding:28px 0 10px;
  }
  .nav-inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
  }
  .brand{
    display:flex;
    align-items:center;
    gap:12px;
  }
  .brand-seal{
    width:44px; height:44px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:0 2px 6px rgba(89,66,32,0.35);
    flex-shrink:0;
    overflow:hidden;
  }
  .brand-seal img{
    width:100%;
    height:100%;
    display:block;
  }
  .brand-name{
    font-family:'Playfair Display', serif;
    font-size:23px;
    font-weight:700;
    color:var(--ink);
    letter-spacing:0.02em;
  }
  .brand-name em{
    font-style:italic;
    color:var(--gold-dark);
  }

  nav.links{
    display:flex;
    align-items:center;
    gap:34px;
    font-size:16px;
    color:var(--ink-soft);
  }
  nav.links a{
    position:relative;
    padding-bottom:4px;
    transition:color 0.2s ease;
  }
  nav.links a:hover{ color:var(--gold-dark); }
  nav.links a::after{
    content:"";
    position:absolute;
    left:0; right:100%;
    bottom:0;
    height:1px;
    background:var(--gold-dark);
    transition:right 0.25s ease;
  }
  nav.links a:hover::after{ right:0; }

  .nav-cta{
    border:1px solid var(--gold-dark);
    color:var(--gold-dark);
    padding:9px 20px;
    border-radius:30px;
    font-size:15px;
    letter-spacing:0.02em;
    transition:all 0.2s ease;
    white-space:nowrap;
  }
  .nav-cta:hover{
    background:var(--gold-dark);
    color:var(--cream-light);
  }

  .nav-toggle{
    display:none;
    flex-direction:column;
    justify-content:center;
    align-items:stretch;
    gap:5px;
    width:34px; height:34px;
    padding:0;
    background:none;
    border:none;
    cursor:pointer;
    flex-shrink:0;
  }
  .nav-toggle span{
    display:block;
    width:100%;
    height:2px;
    background:var(--ink);
    border-radius:2px;
    transition:transform 0.2s ease, opacity 0.2s ease;
  }
  header.nav.nav-open .nav-toggle span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  header.nav.nav-open .nav-toggle span:nth-child(2){ opacity:0; }
  header.nav.nav-open .nav-toggle span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

  @media (max-width:760px){
    .nav-toggle{ display:flex; }
    nav.links{
      display:none;
      position:absolute;
      top:100%;
      left:0; right:0;
      flex-direction:column;
      align-items:stretch;
      gap:2px;
      background:var(--paper);
      padding:10px 4px 18px;
      box-shadow:0 20px 34px -16px rgba(89,66,32,0.4);
      border-top:1px solid var(--paper-edge);
    }
    header.nav.nav-open nav.links{ display:flex; }
    nav.links a{ padding:12px 6px; }
    nav.links a::after{ display:none; }
    nav.links .nav-cta{
      margin-top:8px;
      text-align:center;
      align-self:flex-start;
    }
  }

  /* ---------- DECORATIVE BLOSSOMS ---------- */
  .blossom{
    position:absolute;
    pointer-events:none;
    z-index:0;
    opacity:0.9;
  }
  .petal-fall{
    position:absolute;
    pointer-events:none;
    opacity:0.85;
    animation:drift 14s ease-in-out infinite;
  }
  @keyframes drift{
    0%{ transform:translateY(0) rotate(0deg); }
    50%{ transform:translateY(18px) rotate(15deg); }
    100%{ transform:translateY(0) rotate(0deg); }
  }

  /* ---------- HERO ---------- */
  .hero{
    position:relative;
    padding:56px 0 90px;
    overflow:visible;
  }

  .hero-decor-topright{ top:-40px; right:-40px; width:260px; }
  .hero-decor-left{ top:120px; left:-70px; width:190px; opacity:0.75; }

  .hero-inner{
    position:relative;
    background:var(--paper);
    border-radius:2px;
    padding:72px 64px;
    text-align:center;
    box-shadow:
      0 1px 0 rgba(255,255,255,0.6) inset,
      0 24px 50px -20px rgba(89,66,32,0.28);
    clip-path: polygon(
      0.6% 3%, 3% 0.4%, 12% 1.1%, 22% 0%, 34% 0.8%, 46% 0.1%, 58% 0.9%,
      70% 0.2%, 82% 1%, 92% 0.3%, 99.2% 2.4%,
      99.7% 12%, 100% 24%, 99.4% 36%, 100% 48%, 99.5% 60%, 100% 72%,
      99.3% 84%, 99.8% 94%, 98.5% 99.4%,
      88% 99%, 76% 99.8%, 64% 99.1%, 52% 99.9%, 40% 99.2%, 28% 100%,
      16% 99.3%, 6% 99.8%, 0.5% 97.5%,
      0.9% 88%, 0.2% 76%, 0.8% 64%, 0.1% 52%, 0.9% 40%, 0.2% 28%, 0.7% 16%
    );
  }

  .kicker{
    display:inline-flex;
    align-items:center;
    gap:10px;
    font-family:'Noto Serif JP', serif;
    font-size:14px;
    letter-spacing:0.28em;
    text-transform:uppercase;
    color:var(--ink-faint);
    margin-bottom:26px;
  }
  .kicker::before, .kicker::after{
    content:"";
    width:28px; height:1px;
    background:var(--gold);
  }

  .hero h1{
    font-size:clamp(40px, 6vw, 68px);
    line-height:1.08;
    margin-bottom:22px;
  }
  .hero h1 .accent{
    font-style:italic;
    color:var(--blush-dark);
  }

  .hero p.lede{
    font-size:20px;
    color:var(--ink-soft);
    max-width:560px;
    margin:0 auto 40px;
    line-height:1.65;
  }

  .cta-row{
    display:flex;
    gap:18px;
    justify-content:center;
    flex-wrap:wrap;
  }

  .btn{
    font-family:'EB Garamond', serif;
    font-size:17px;
    letter-spacing:0.03em;
    padding:15px 34px;
    border-radius:30px;
    display:inline-flex;
    align-items:center;
    gap:8px;
    transition:transform 0.2s ease, box-shadow 0.2s ease;
    cursor:pointer;
  }
  .btn-primary{
    background:linear-gradient(160deg, var(--gold-light), var(--gold-dark));
    color:var(--cream-light);
    box-shadow:0 10px 24px -8px rgba(138,106,67,0.55);
    border:none;
  }
  .btn-primary:hover{ transform:translateY(-2px); box-shadow:0 14px 28px -8px rgba(138,106,67,0.65); }
  .btn-secondary{
    background:transparent;
    color:var(--ink);
    border:1px solid var(--ink-faint);
  }
  .btn-secondary:hover{ border-color:var(--gold-dark); color:var(--gold-dark); transform:translateY(-2px); }

  .hero-stamp{
    position:absolute;
    z-index:3;
    right:-18px;
    top:-26px;
    width:96px; height:96px;
    transform:rotate(9deg);
    filter:drop-shadow(0 10px 22px rgba(89,66,32,0.5));
  }

  @media (max-width:640px){
    .hero-inner{ padding:52px 26px; }
    .hero-stamp{ display:none; }
  }

  /* ---------- SECTION LABEL ---------- */
  .section-head{
    text-align:center;
    margin-bottom:56px;
  }
  .section-head .kicker{ margin-bottom:14px; }
  .section-head h2{
    font-size:clamp(30px, 4vw, 42px);
  }
  .section-head p{
    color:var(--ink-soft);
    font-size:18px;
    max-width:520px;
    margin:14px auto 0;
  }

  /* ---------- FEATURES ---------- */
  .features{
    padding:100px 0 40px;
    position:relative;
  }

  .feature-grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:34px;
  }
  @media (max-width:860px){
    .feature-grid{ grid-template-columns:1fr; max-width:420px; margin:0 auto; }
  }

  .stamp-card{
    background:var(--paper);
    padding:42px 30px 36px;
    text-align:center;
    position:relative;
    box-shadow:0 16px 34px -18px rgba(89,66,32,0.35);
    --notch:14px;
    --gap:26px;
    mask-image:
      radial-gradient(circle var(--notch) at var(--gap) 0, transparent 98%, black 100%),
      radial-gradient(circle var(--notch) at calc(100% - var(--gap)) 0, transparent 98%, black 100%),
      radial-gradient(circle var(--notch) at var(--gap) 100%, transparent 98%, black 100%),
      radial-gradient(circle var(--notch) at calc(100% - var(--gap)) 100%, transparent 98%, black 100%),
      radial-gradient(circle var(--notch) at 0 var(--gap), transparent 98%, black 100%),
      radial-gradient(circle var(--notch) at 0 calc(100% - var(--gap)), transparent 98%, black 100%),
      radial-gradient(circle var(--notch) at 100% var(--gap), transparent 98%, black 100%),
      radial-gradient(circle var(--notch) at 100% calc(100% - var(--gap)), transparent 98%, black 100%),
      linear-gradient(black, black);
    mask-composite:intersect;
    -webkit-mask-image:
      radial-gradient(circle var(--notch) at var(--gap) 0, transparent 98%, black 100%),
      radial-gradient(circle var(--notch) at calc(100% - var(--gap)) 0, transparent 98%, black 100%),
      radial-gradient(circle var(--notch) at var(--gap) 100%, transparent 98%, black 100%),
      radial-gradient(circle var(--notch) at calc(100% - var(--gap)) 100%, transparent 98%, black 100%),
      radial-gradient(circle var(--notch) at 0 var(--gap), transparent 98%, black 100%),
      radial-gradient(circle var(--notch) at 0 calc(100% - var(--gap)), transparent 98%, black 100%),
      radial-gradient(circle var(--notch) at 100% var(--gap), transparent 98%, black 100%),
      radial-gradient(circle var(--notch) at 100% calc(100% - var(--gap)), transparent 98%, black 100%),
      linear-gradient(black, black);
    -webkit-mask-composite: source-in, source-in, source-in, source-in, source-in, source-in, source-in, source-in;
    transition:transform 0.25s ease;
  }
  .stamp-card:hover{ transform:translateY(-6px); }

  .icon-circle{
    width:64px; height:64px;
    margin:0 auto 22px;
    border-radius:50%;
    background:var(--blush-soft);
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .icon-circle svg{ width:30px; height:30px; }

  .stamp-card h3{
    font-size:23px;
    margin-bottom:12px;
  }
  .stamp-card p{
    color:var(--ink-soft);
    font-size:16.5px;
    line-height:1.6;
  }

  /* ---------- ABOUT / STORY STRIP ---------- */
  .story{
    padding:120px 0;
    position:relative;
  }
  .story-inner{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:64px;
    align-items:center;
  }
  @media (max-width:820px){
    .story-inner{ grid-template-columns:1fr; }
  }
  .story-art{
    position:relative;
    width:100%;
    aspect-ratio:1/1;
    max-width:420px;
    margin:0 auto;
  }
  .story-art .story-logo{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    filter:drop-shadow(0 30px 60px rgba(89,66,32,0.5));
  }
  .story h2{ font-size:clamp(28px,3.6vw,38px); margin-bottom:20px; }
  .story p{
    color:var(--ink-soft);
    font-size:18px;
    line-height:1.75;
    margin-bottom:16px;
  }

  /* ---------- SIGNUP ---------- */
  .signup{
    padding:40px 0 130px;
  }
  .signup-card{
    background:linear-gradient(155deg, var(--gold-dark), #6f552f);
    border-radius:6px;
    padding:70px 48px;
    text-align:center;
    position:relative;
    overflow:hidden;
    box-shadow:0 30px 60px -24px rgba(58,42,18,0.55);
    clip-path: polygon(
      0.6% 3%, 3% 0.4%, 12% 1.1%, 22% 0%, 34% 0.8%, 46% 0.1%, 58% 0.9%,
      70% 0.2%, 82% 1%, 92% 0.3%, 99.2% 2.4%,
      99.7% 12%, 100% 24%, 99.4% 36%, 100% 48%, 99.5% 60%, 100% 72%,
      99.3% 84%, 99.8% 94%, 98.5% 99.4%,
      88% 99%, 76% 99.8%, 64% 99.1%, 52% 99.9%, 40% 99.2%, 28% 100%,
      16% 99.3%, 6% 99.8%, 0.5% 97.5%,
      0.9% 88%, 0.2% 76%, 0.8% 64%, 0.1% 52%, 0.9% 40%, 0.2% 28%, 0.7% 16%
    );
  }
  .signup-card::before{
    content:"";
    position:absolute;
    inset:0;
    background:radial-gradient(circle at 85% 15%, rgba(255,255,255,0.14), transparent 40%),
               radial-gradient(circle at 10% 90%, rgba(255,255,255,0.08), transparent 45%);
  }
  .signup-card h2{
    color:var(--cream-light);
    font-size:clamp(28px,3.6vw,38px);
    margin-bottom:14px;
    position:relative;
  }
  .signup-card p{
    color:rgba(246,239,226,0.85);
    font-size:18px;
    max-width:460px;
    margin:0 auto 34px;
    position:relative;
  }
  .signup-form{
    display:flex;
    gap:12px;
    justify-content:center;
    flex-wrap:wrap;
    position:relative;
  }
  .signup-form input{
    font-family:'EB Garamond', serif;
    font-size:17px;
    padding:15px 22px;
    border-radius:30px;
    border:none;
    width:300px;
    max-width:80vw;
    background:rgba(251,247,238,0.95);
    color:var(--ink);
  }
  .signup-form input:focus{ outline:2px solid var(--cream-light); }
  .signup-form button{
    font-family:'EB Garamond', serif;
    font-size:17px;
    padding:15px 30px;
    border-radius:30px;
    border:none;
    background:var(--ink);
    color:var(--cream-light);
    cursor:pointer;
    transition:transform 0.2s ease, background 0.2s ease;
  }
  .signup-form button:hover{ transform:translateY(-2px); background:#000; }
  .signup-note{
    margin-top:16px;
    font-size:14px;
    color:rgba(246,239,226,0.65);
    position:relative;
  }
  .form-success{
    display:none;
    color:var(--cream-light);
    font-size:16px;
    margin-top:10px;
    font-style:italic;
  }

  /* ---------- FOOTER ---------- */
  footer{
    padding:50px 0 60px;
    border-top:1px solid var(--paper-edge);
  }
  .footer-inner{
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
    gap:20px;
  }
  .footer-brand{
    display:flex;
    align-items:center;
    gap:10px;
    color:var(--ink-soft);
    font-size:15px;
  }
  .footer-links{
    display:flex;
    gap:26px;
    font-size:15px;
    color:var(--ink-faint);
  }
  .footer-links a:hover{ color:var(--gold-dark); }

  ::selection{ background:var(--blush); color:var(--ink); }

  /* ---------- CARD LINK ---------- */
  .card-link{
    display:inline-block;
    margin-top:6px;
    font-size:15px;
    color:var(--gold-dark);
    border-bottom:1px solid transparent;
    transition:border-color 0.2s ease;
  }
  .card-link:hover{ border-color:var(--gold-dark); }
  .card-link.disabled{
    color:var(--ink-faint);
    font-style:italic;
    cursor:default;
  }
  .card-link.disabled:hover{ border-color:transparent; }

  .card-link.shrine-link,
  .card-link.email-link,
  .card-link.social-link{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:42px;
    height:42px;
    flex-shrink:0;
    border:1.5px solid var(--gold-dark);
    border-bottom:1.5px solid var(--gold-dark);
    border-radius:50%;
    background:var(--cream-light);
    color:var(--gold-dark);
    transition:transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  }
  .card-link.shrine-link svg,
  .card-link.email-link svg,
  .card-link.social-link svg{
    width:19px;
    height:auto;
    fill:currentColor;
  }
  .card-link.email-link svg,
  .card-link.social-link svg{ width:17px; }
  .card-link.shrine-link:hover,
  .card-link.email-link:hover,
  .card-link.social-link:hover{
    border-color:var(--gold-dark);
    background:var(--gold-dark);
    color:var(--cream-light);
    transform:translateY(-3px);
    box-shadow:0 10px 18px -8px rgba(89,66,32,0.45);
  }

  .card-links-row{
    display:flex;
    align-items:center;
    justify-content:flex-start;
    align-self:flex-start;
    width:100%;
    gap:12px;
    margin-top:auto;
    flex-shrink:0;
  }
  .card-link-sep{
    display:inline-block;
    color:var(--gold);
    font-size:20px;
    line-height:1;
    opacity:0.6;
    user-select:none;
    flex-shrink:0;
  }

  /* ---------- PAGE HERO (subpages) ---------- */
  .page-hero{
    position:relative;
    padding:52px 0 50px;
  }
  .page-hero-inner{
    position:relative;
    background:var(--paper);
    border-radius:2px;
    padding:58px 60px;
    text-align:center;
    box-shadow:
      0 1px 0 rgba(255,255,255,0.6) inset,
      0 24px 50px -20px rgba(89,66,32,0.28);
    clip-path: polygon(
      0.6% 3%, 3% 0.4%, 12% 1.1%, 22% 0%, 34% 0.8%, 46% 0.1%, 58% 0.9%,
      70% 0.2%, 82% 1%, 92% 0.3%, 99.2% 2.4%,
      99.7% 12%, 100% 24%, 99.4% 36%, 100% 48%, 99.5% 60%, 100% 72%,
      99.3% 84%, 99.8% 94%, 98.5% 99.4%,
      88% 99%, 76% 99.8%, 64% 99.1%, 52% 99.9%, 40% 99.2%, 28% 100%,
      16% 99.3%, 6% 99.8%, 0.5% 97.5%,
      0.9% 88%, 0.2% 76%, 0.8% 64%, 0.1% 52%, 0.9% 40%, 0.2% 28%, 0.7% 16%
    );
  }
  .page-hero h1{
    font-size:clamp(34px, 5vw, 52px);
    line-height:1.14;
    margin-bottom:16px;
  }
  .page-hero p.lede{
    font-size:18px;
    color:var(--ink-soft);
    max-width:600px;
    margin:0 auto;
    line-height:1.65;
  }
  @media (max-width:640px){
    .page-hero-inner{ padding:44px 26px; }
  }

  /* ---------- SEARCH BAR ---------- */
  .search-bar{
    display:flex;
    justify-content:center;
    gap:12px;
    margin-top:30px;
    flex-wrap:wrap;
  }
  .search-bar input{
    font-family:'EB Garamond', serif;
    font-size:16px;
    padding:13px 22px;
    border-radius:30px;
    border:1px solid var(--paper-edge);
    width:320px;
    max-width:80vw;
    background:var(--cream-light);
    color:var(--ink);
  }
  .search-bar input:focus{ outline:none; border-color:var(--gold); }
  .search-bar button{
    font-family:'EB Garamond', serif;
    font-size:16px;
    padding:13px 28px;
    border-radius:30px;
    border:1px solid var(--gold-dark);
    background:transparent;
    color:var(--gold-dark);
    cursor:pointer;
    transition:all 0.2s ease;
  }
  .search-bar button:hover{ background:var(--gold-dark); color:var(--cream-light); }

  /* ---------- GAME MAP ---------- */
  .map-section{ padding:16px 0 100px; position:relative; }
  .map-frame{
    background:var(--paper);
    border-radius:4px;
    padding:14px;
    box-shadow:0 24px 50px -20px rgba(89,66,32,0.32);
    position:relative;
    clip-path: polygon(
      0.6% 3%, 3% 0.4%, 12% 1.1%, 22% 0%, 34% 0.8%, 46% 0.1%, 58% 0.9%,
      70% 0.2%, 82% 1%, 92% 0.3%, 99.2% 2.4%,
      99.7% 12%, 100% 24%, 99.4% 36%, 100% 48%, 99.5% 60%, 100% 72%,
      99.3% 84%, 99.8% 94%, 98.5% 99.4%,
      88% 99%, 76% 99.8%, 64% 99.1%, 52% 99.9%, 40% 99.2%, 28% 100%,
      16% 99.3%, 6% 99.8%, 0.5% 97.5%,
      0.9% 88%, 0.2% 76%, 0.8% 64%, 0.1% 52%, 0.9% 40%, 0.2% 28%, 0.7% 16%
    );
  }
  .map-frame svg{ width:100%; height:auto; display:block; border-radius:2px; }
  .map-caption{
    text-align:center;
    color:var(--ink-faint);
    font-size:14.5px;
    margin-top:18px;
    font-style:italic;
  }
  .map-source{
    text-align:center;
    color:var(--ink-faint);
    font-size:13.5px;
    margin-top:8px;
  }
  .map-source a{
    color:var(--gold-dark);
    border-bottom:1px solid transparent;
  }
  .map-source a:hover{ border-color:var(--gold-dark); }
  .map-node{ transition:opacity 0.25s ease, transform 0.2s ease; transform-box:fill-box; transform-origin:center; }
  .map-node.dim{ opacity:0.22; }
  .map-pin-link{ cursor:pointer; }
  .map-pin-link:hover .map-node,
  .map-pin-link:focus-visible .map-node{ transform:scale(1.18); }
  .map-pin-link:focus-visible{ outline:none; }
  .map-pin-link:focus-visible .map-node use{ filter:drop-shadow(0 0 4px var(--gold-dark)); }

  /* ---------- ATLAS GRID ---------- */
  .atlas-head{ margin-top:96px; }
  .atlas-grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    align-items:stretch;
    gap:34px 30px;
  }
  @media (max-width:900px){
    .atlas-grid{ grid-template-columns:repeat(2,1fr); }
  }
  @media (max-width:640px){
    .atlas-grid{ grid-template-columns:1fr; max-width:420px; margin-left:auto; margin-right:auto; }
  }

  .atlas-card-wrap{
    position:relative;
    scroll-margin-top:32px;
    transition:transform 0.25s ease;
  }
  .atlas-card-wrap:hover{ transform:translateY(-6px); }
  .atlas-card-wrap.hide{ display:none; }
  .atlas-card-wrap:target .atlas-card{
    animation:atlas-target-glow 1.8s ease;
  }
  @keyframes atlas-target-glow{
    0%{ box-shadow:0 0 0 3px var(--gold), 0 22px 40px -18px rgba(89,66,32,0.55); }
    100%{ box-shadow:none; }
  }

  .atlas-card{
    background:var(--paper);
    padding:36px 26px 28px;
    position:relative;
    height:100%;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    box-shadow:0 16px 34px -18px rgba(89,66,32,0.35);
    --notch:14px;
    --gap:24px;
    mask-image:
      radial-gradient(circle var(--notch) at var(--gap) 0, transparent 98%, black 100%),
      radial-gradient(circle var(--notch) at calc(100% - var(--gap)) 0, transparent 98%, black 100%),
      radial-gradient(circle var(--notch) at var(--gap) 100%, transparent 98%, black 100%),
      radial-gradient(circle var(--notch) at calc(100% - var(--gap)) 100%, transparent 98%, black 100%),
      radial-gradient(circle var(--notch) at 0 var(--gap), transparent 98%, black 100%),
      radial-gradient(circle var(--notch) at 0 calc(100% - var(--gap)), transparent 98%, black 100%),
      radial-gradient(circle var(--notch) at 100% var(--gap), transparent 98%, black 100%),
      radial-gradient(circle var(--notch) at 100% calc(100% - var(--gap)), transparent 98%, black 100%),
      linear-gradient(black, black);
    mask-composite:intersect;
    -webkit-mask-image:
      radial-gradient(circle var(--notch) at var(--gap) 0, transparent 98%, black 100%),
      radial-gradient(circle var(--notch) at calc(100% - var(--gap)) 0, transparent 98%, black 100%),
      radial-gradient(circle var(--notch) at var(--gap) 100%, transparent 98%, black 100%),
      radial-gradient(circle var(--notch) at calc(100% - var(--gap)) 100%, transparent 98%, black 100%),
      radial-gradient(circle var(--notch) at 0 var(--gap), transparent 98%, black 100%),
      radial-gradient(circle var(--notch) at 0 calc(100% - var(--gap)), transparent 98%, black 100%),
      radial-gradient(circle var(--notch) at 100% var(--gap), transparent 98%, black 100%),
      radial-gradient(circle var(--notch) at 100% calc(100% - var(--gap)), transparent 98%, black 100%),
      linear-gradient(black, black);
    -webkit-mask-composite: source-in, source-in, source-in, source-in, source-in, source-in, source-in, source-in;
  }

  .atlas-badge{
    position:absolute;
    top:-6px; left:-4px;
    z-index:2;
    width:36px; height:36px;
    border-radius:50%;
    background:var(--gold-dark);
    color:var(--cream-light);
    display:flex; align-items:center; justify-content:center;
    font-family:'Playfair Display', serif;
    font-weight:700;
    font-size:16px;
    box-shadow:0 6px 14px -4px rgba(89,66,32,0.5), inset 0 0 0 2px rgba(246,239,226,0.3);
  }
  .atlas-badge-icon{
    padding:0;
    background:var(--cream-light);
    overflow:hidden;
  }
  .atlas-badge-icon img{
    width:100%;
    height:100%;
    object-fit:cover;
    transform:scale(1.08);
  }
  .dojo-emblem{
    position:absolute;
    top:-6px; right:-4px;
    z-index:2;
    width:36px; height:36px;
    border-radius:50%;
    background:var(--paper);
    color:var(--gold-dark);
    display:flex; align-items:center; justify-content:center;
    font-family:'Noto Serif JP', serif;
    font-weight:700;
    font-size:15px;
    border:2px solid var(--gold-dark);
    box-shadow:0 6px 14px -4px rgba(89,66,32,0.35), inset 0 0 0 2px rgba(246,239,226,0.5);
    overflow:hidden;
    cursor:pointer;
    transition:transform 0.2s ease, box-shadow 0.2s ease;
  }
  .dojo-emblem:hover{
    transform:scale(1.08);
    box-shadow:0 10px 18px -4px rgba(89,66,32,0.5), inset 0 0 0 2px rgba(246,239,226,0.6);
  }
  .dojo-emblem-logo{
    padding:0;
    background:var(--cream-light);
  }
  .dojo-emblem-logo img{
    width:100%;
    height:100%;
    object-fit:cover;
  }
  .dojo-emblem-logo-left img{
    object-position:left center;
  }
  .dojo-emblem-mon{
    padding:3px;
  }
  .dojo-emblem-logo-dark{
    background:var(--ink);
  }
  .dojo-emblem-mon svg{
    width:100%;
    height:100%;
  }
  .atlas-card h3{ font-size:21px; margin:8px 0 4px; }
  .atlas-region{
    font-size:12.5px;
    letter-spacing:0.1em;
    text-transform:uppercase;
    color:var(--ink-faint);
    margin-bottom:14px;
  }
  .atlas-tags{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px; }
  .atlas-tag{
    font-size:12.5px;
    padding:5px 12px;
    border-radius:20px;
    background:var(--blush-soft);
    color:var(--ink-soft);
  }
  .atlas-card p.desc{
    color:var(--ink-soft);
    font-size:15.5px;
    line-height:1.6;
    margin-bottom:4px;
  }
  .atlas-card p.desc-address{
    margin-bottom:0;
  }
  .atlas-card p.desc-practice{
    margin-top:0;
  }
  .desc-divider{
    width:100%;
    border:none;
    border-top:1.5px dotted var(--gold-dark);
    opacity:0.55;
    margin:11px 0;
  }
  .no-results{
    text-align:center;
    color:var(--ink-faint);
    font-style:italic;
    font-size:16px;
    padding:40px 0;
    display:none;
  }


  /* ---------- COMPETITIONS PAGE ---------- */
  .comp-intro{
    max-width:640px;
    margin:0 auto 54px;
    text-align:center;
    color:var(--ink-soft);
    font-size:16.5px;
    line-height:1.65;
  }
  .comp-intro a{ color:var(--gold-dark); border-bottom:1px solid transparent; }
  .comp-intro a:hover{ border-color:var(--gold-dark); }

  .deadlines{ padding:16px 0 90px; }
  .deadline-row{
    display:flex;
    flex-wrap:wrap;
    gap:14px;
    justify-content:center;
    max-width:900px;
    margin:0 auto;
  }
  .deadline-pill{
    display:flex;
    align-items:center;
    gap:12px;
    background:var(--paper);
    border:1px solid var(--paper-edge);
    border-radius:40px;
    padding:10px 20px 10px 10px;
    box-shadow:0 10px 22px -14px rgba(89,66,32,0.3);
  }
  .deadline-date{
    flex-shrink:0;
    width:52px; height:52px;
    border-radius:50%;
    background:var(--gold-dark);
    color:var(--cream-light);
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    font-family:'Playfair Display', serif;
    line-height:1.05;
  }
  .deadline-date .dd-month{ font-size:9px; letter-spacing:0.09em; text-transform:uppercase; opacity:0.85; }
  .deadline-date .dd-day{ font-size:17px; font-weight:700; }
  .deadline-label{ font-size:14.5px; color:var(--ink-soft); line-height:1.35; max-width:190px; }

  .comp-section{ padding:16px 0 100px; }

  .comp-badge{
    flex-direction:column;
    font-family:'Playfair Display', serif;
    line-height:1.05;
  }
  .comp-badge .cd-month{ font-size:9.5px; letter-spacing:0.09em; text-transform:uppercase; opacity:0.9; }
  .comp-badge .cd-day{ font-size:17px; font-weight:700; }

  .comp-icon{
    padding:7px;
  }
  .comp-icon svg{
    width:100%;
    height:100%;
    fill:none;
    stroke:var(--gold-dark);
    stroke-width:1.6;
    stroke-linecap:round;
    stroke-linejoin:round;
  }

  .comp-note{
    color:var(--ink-soft);
    font-size:15.5px;
    line-height:1.6;
  }
  .comp-note em{
    color:var(--gold-dark);
    font-style:normal;
  }

  .season-strip{ padding:0 0 40px; }
  .season-list{
    max-width:760px;
    margin:0 auto;
    background:var(--paper);
    border-radius:4px;
    box-shadow:0 16px 34px -20px rgba(89,66,32,0.3);
  }
  .season-item{
    display:flex;
    align-items:baseline;
    gap:22px;
    padding:18px 30px;
    border-bottom:1px solid var(--paper-edge);
  }
  .season-item:last-child{ border-bottom:none; }
  .season-date{
    flex-shrink:0;
    width:110px;
    font-family:'Playfair Display', serif;
    font-weight:700;
    color:var(--gold-dark);
    font-size:15px;
  }
  .season-body h4{
    font-family:'Playfair Display', 'Noto Serif JP', serif;
    font-weight:600;
    font-size:16.5px;
    color:var(--ink);
    margin-bottom:2px;
  }
  .season-body p{
    font-size:14px;
    color:var(--ink-faint);
  }
  @media (max-width:640px){
    .season-item{ flex-direction:column; gap:4px; padding:16px 22px; }
    .season-date{ width:auto; }
  }

  /* ---------- PROFILE / SIGN-IN ---------- */
  .auth-card{
    max-width:460px;
    margin:0 auto;
  }
  .auth-card .lede{ margin-bottom:36px; }

  .google-btn{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    width:100%;
    background:#fff;
    color:#3c4043;
    border:1px solid #dadce0;
    border-radius:30px;
    padding:14px 24px;
    font-family:-apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    font-size:16px;
    font-weight:500;
    cursor:pointer;
    box-shadow:0 1px 2px rgba(0,0,0,0.08);
    transition:box-shadow 0.2s ease, transform 0.2s ease;
  }
  .google-btn:hover{ box-shadow:0 4px 10px rgba(0,0,0,0.15); transform:translateY(-1px); }
  .google-btn svg{ width:20px; height:20px; flex-shrink:0; }

  .auth-divider{
    display:flex;
    align-items:center;
    gap:14px;
    margin:24px 0;
    color:var(--ink-faint);
    font-size:13px;
    letter-spacing:0.1em;
    text-transform:uppercase;
  }
  .auth-divider::before, .auth-divider::after{
    content:"";
    flex:1;
    height:1px;
    background:var(--paper-edge);
  }

  .auth-card .signup-form{ justify-content:stretch; }
  .auth-card .signup-form input{
    flex:1;
    width:auto;
    background:var(--cream-light);
    border:1px solid var(--paper-edge);
  }
  .auth-card .signup-form input:focus{ outline:none; border-color:var(--gold); }
  .auth-card .signup-form button{ flex-shrink:0; }

  .preview-note{
    margin-top:22px;
    font-size:13.5px;
    color:var(--ink-faint);
    font-style:italic;
    line-height:1.55;
  }

  .preview-badge{
    display:inline-flex;
    align-items:center;
    gap:8px;
    background:var(--blush-soft);
    color:var(--ink-soft);
    font-size:12.5px;
    letter-spacing:0.06em;
    text-transform:uppercase;
    padding:6px 16px;
    border-radius:20px;
    margin-bottom:26px;
  }
  .preview-badge::before{
    content:"";
    width:7px; height:7px;
    border-radius:50%;
    background:var(--blush-dark);
  }

  .profile-header{
    display:flex;
    align-items:center;
    gap:20px;
    margin-bottom:34px;
    text-align:left;
  }
  .profile-avatar{
    width:76px; height:76px;
    border-radius:50%;
    flex-shrink:0;
    background:radial-gradient(circle at 35% 30%, var(--gold-light), var(--gold-dark) 75%);
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:0 8px 18px -6px rgba(89,66,32,0.4), inset 0 0 0 3px rgba(255,255,255,0.25);
  }
  .profile-avatar svg{ width:36px; height:36px; stroke:var(--cream-light); fill:none; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
  .profile-name-row{ display:flex; align-items:center; gap:10px; }
  .profile-name h2{ font-size:24px; margin-bottom:4px; }
  .profile-name-row h2{ margin-bottom:0; }
  .profile-dojo-logo{
    display:inline-flex;
    width:30px; height:30px;
    flex-shrink:0;
    border-radius:50%;
    overflow:hidden;
    border:2px solid var(--gold-dark);
    background:var(--cream-light);
    box-shadow:0 4px 10px -4px rgba(89,66,32,0.4);
  }
  .profile-dojo-logo img{ width:100%; height:100%; object-fit:cover; }
  .profile-name .profile-dojo{ font-size:14.5px; color:var(--ink-soft); }
  .profile-name .profile-dojo a{ color:var(--gold-dark); border-bottom:1px solid transparent; }
  .profile-name .profile-dojo a:hover{ border-color:var(--gold-dark); }
  .profile-rank-badge{
    display:inline-block;
    margin-top:8px;
    font-size:12.5px;
    padding:5px 14px;
    border-radius:20px;
    background:var(--gold-dark);
    color:var(--cream-light);
    letter-spacing:0.04em;
  }

  .profile-block{ text-align:left; margin-top:8px; }
  .profile-block .section-head{ text-align:left; margin-bottom:22px; }
  .profile-block .section-head p{ margin:10px 0 0; }

  .profile-next{
    display:flex;
    align-items:center;
    gap:16px;
    background:var(--cream-light);
    border-radius:4px;
    padding:18px 22px;
    margin-top:28px;
    text-align:left;
  }
  .profile-next .pn-icon{
    flex-shrink:0;
    width:40px; height:40px;
    border-radius:50%;
    background:var(--paper);
    border:2px solid var(--gold-dark);
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .profile-next .pn-icon svg{ width:18px; height:18px; stroke:var(--gold-dark); fill:none; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
  .profile-next p{ font-size:14.5px; color:var(--ink-soft); }
  .profile-next a{ color:var(--gold-dark); border-bottom:1px solid transparent; }
  .profile-next a:hover{ border-color:var(--gold-dark); }

  .sign-out-link{
    display:inline-block;
    margin-top:30px;
    font-size:14px;
    color:var(--ink-faint);
    border-bottom:1px solid transparent;
    cursor:pointer;
  }
  .sign-out-link:hover{ color:var(--gold-dark); border-color:var(--gold-dark); }