:root{
    --bg:#0a0a08;
    --bg-vignette: radial-gradient(120% 90% at 50% -10%, #16140f 0%, #0a0a08 55%, #060605 100%);
    --surface:#131210;
    --surface-2:#181613;
    --line: rgba(237,231,217,0.13);
    --line-strong: rgba(237,231,217,0.22);
    --cream:#EEE7D6;
    --cream-dim:#a39c8b;
    --gold:#c9a24d;
    --gold-soft:#e3c47c;
    --gold-dim:#7d6935;
    --shadow: 0 20px 60px -25px rgba(0,0,0,0.8);
    --logo-shadow: 0 18px 40px -16px rgba(0,0,0,0.7);
  }

  html[data-theme="light"]{
    --bg:#F3EEE3;
    --bg-vignette: radial-gradient(120% 90% at 50% -10%, #FBF8F1 0%, #F3EEE3 55%, #ECE5D5 100%);
    --surface:#FCFAF5;
    --surface-2:#F5F0E5;
    --line: rgba(30,27,20,0.12);
    --line-strong: rgba(30,27,20,0.22);
    --cream:#22201A;
    --cream-dim:#7a7261;
    --gold:#a9803a;
    --gold-soft:#8a672b;
    --gold-dim:#c7ab77;
    --shadow: 0 20px 50px -28px rgba(60,50,20,0.28);
    --logo-shadow: 0 14px 30px -14px rgba(60,50,20,0.35);
  }

  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;}
  html{ transition: background 0.35s ease; }
  body{
    background: var(--bg-vignette);
    color: var(--cream);
    font-family:'Jost', sans-serif;
    min-height:100vh;
    display:flex;
    justify-content:center;
    padding: 48px 18px 64px;
    position:relative;
    overflow-x:hidden;
    transition: background 0.35s ease, color 0.35s ease;
  }

  /* ambient sparkles */
  .sparkle{
    position:fixed;
    color: var(--gold);
    opacity:0.35;
    pointer-events:none;
    animation: twinkle 4.5s ease-in-out infinite;
  }
  .sparkle.s1{top:8%; left:12%; font-size:14px; animation-delay:0s;}
  .sparkle.s2{top:18%; right:10%; font-size:10px; animation-delay:1.2s;}
  .sparkle.s3{top:62%; left:6%; font-size:9px; animation-delay:2.1s;}
  .sparkle.s4{top:80%; right:14%; font-size:13px; animation-delay:0.6s;}
  .sparkle.s5{top:40%; right:4%; font-size:8px; animation-delay:3s;}
  @keyframes twinkle{
    0%,100%{opacity:0.15; transform:scale(0.85) rotate(0deg);}
    50%{opacity:0.55; transform:scale(1.1) rotate(8deg);}
  }
  @media (prefers-reduced-motion: reduce){
    .sparkle{animation:none; opacity:0.25;}
  }

  .page{
    width:100%;
    max-width:430px;
    position:relative;
    z-index:1;
  }

  /* ---------- Header ---------- */
  header{
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    margin-bottom: 30px;
  }

  .logo-wrap{
    width:128px;
    margin-bottom:14px;
    filter: drop-shadow(var(--logo-shadow));
  }
  .logo-wrap img{
    width:100%;
    height:auto;
    display:block;
    transition: filter 0.35s ease;
  }
  /* the artwork's cream outline/white laces need slight darkening for legibility on the light theme */
  html[data-theme="light"] .logo-wrap img{
    filter: brightness(0.94) saturate(1.05);
  }

  h1{
    font-family:'Cormorant Garamond', serif;
    font-weight:600;
    font-size: 2.5rem;
    letter-spacing: 0.04em;
    margin: 0 0 6px;
    color: var(--cream);
  }

  .tagline{
    font-size: 0.78rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--gold-soft);
    font-weight:400;
    margin: 0;
  }

  .subtext{
    font-size: 0.86rem;
    color: var(--cream-dim);
    margin: 12px 0 0;
    line-height:1.55;
    max-width: 320px;
    font-weight:300;
  }

  /* ---------- Lace divider (signature element) ---------- */
  .lace-divider{
    display:flex;
    align-items:center;
    justify-content:center;
    margin: 30px 0;
    gap: 10px;
  }
  .lace-divider .rule{
    flex:1;
    height:1px;
    background: linear-gradient(90deg, transparent, var(--line) 40%, var(--line) 60%, transparent);
  }
  .lace-divider svg{ flex-shrink:0; opacity:0.85; }

  /* ---------- Buttons ---------- */
  .links{
    display:flex;
    flex-direction:column;
    gap:12px;
  }

  .link-btn{
    display:flex;
    align-items:center;
    gap:14px;
    padding: 15px 20px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 14px;
    text-decoration:none;
    color: var(--cream);
    transition: border-color 0.25s ease, background 0.35s ease, transform 0.15s ease, color 0.35s ease;
    position:relative;
  }
  .link-btn:hover{
    border-color: var(--gold-dim);
    background: var(--surface-2);
    transform: translateY(-1px);
  }
  .link-btn:active{ transform: translateY(0px) scale(0.99); }

  .link-btn .icon{
    width:22px; height:22px;
    flex-shrink:0;
    color: var(--gold);
  }

  .link-btn .label{
    display:flex;
    flex-direction:column;
    gap:1px;
    flex:1;
  }
  .link-btn .label .name{
    font-size:0.98rem;
    font-weight:500;
    letter-spacing:0.01em;
  }
  .link-btn .label .sub{
    font-size:0.74rem;
    color: var(--cream-dim);
    font-weight:300;
  }

  .link-btn .arrow{
    color: var(--cream-dim);
    font-size:1.1rem;
    transition: transform 0.25s ease, color 0.25s ease;
  }
  .link-btn:hover .arrow{
    transform: translateX(3px);
    color: var(--gold);
  }

  /* ---------- Requisites accordion ---------- */
  .req-section{
    margin-top: 8px;
  }

  details.req{
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 14px;
    overflow:hidden;
    transition: background 0.35s ease, border-color 0.35s ease;
  }
  details.req[open]{
    border-color: var(--line-strong);
  }

  summary.req-summary{
    list-style:none;
    cursor:pointer;
    display:flex;
    align-items:center;
    gap:14px;
    padding: 15px 20px;
    user-select:none;
  }
  summary.req-summary::-webkit-details-marker{display:none;}

  summary.req-summary .icon{ width:22px; height:22px; color:var(--gold); flex-shrink:0; }
  summary.req-summary .label{ flex:1; }
  summary.req-summary .label .name{ font-size:0.98rem; font-weight:500; }
  summary.req-summary .label .sub{ font-size:0.74rem; color:var(--cream-dim); font-weight:300; }

  .chev{
    width:18px; height:18px;
    color: var(--cream-dim);
    transition: transform 0.3s ease;
    flex-shrink:0;
  }
  details.req[open] .chev{ transform: rotate(180deg); }

  .req-body{
    padding: 4px 20px 20px;
    border-top: 1px solid var(--line);
  }

  .req-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding: 14px 0;
    border-bottom: 1px solid var(--line);
  }
  .req-row:last-of-type{ border-bottom:none; }

  .req-row .field-label{
    font-size:0.68rem;
    letter-spacing:0.12em;
    text-transform:uppercase;
    color: var(--gold-soft);
    margin-bottom:4px;
    font-weight:400;
  }
  .req-row .field-value{
    font-size:0.92rem;
    color: var(--cream);
    font-weight:400;
    word-break: break-word;
  }
  .req-row .field{ flex:1; min-width:0; }

  .copy-btn{
    flex-shrink:0;
    display:flex;
    align-items:center;
    justify-content:center;
    width:38px;
    height:38px;
    border-radius:10px;
    border:1px solid var(--line);
    background: var(--surface-2);
    color: var(--cream-dim);
    cursor:pointer;
    transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
    position:relative;
  }
  .copy-btn:hover{
    border-color: var(--gold-dim);
    color: var(--gold-soft);
  }
  .copy-btn svg{ width:16px; height:16px; }
  .copy-btn.copied{
    border-color: var(--gold);
    color: var(--gold);
  }

  .toast{
    position: fixed;
    bottom: 26px;
    left:50%;
    transform: translateX(-50%) translateY(20px);
    background: var(--surface-2);
    border:1px solid var(--gold-dim);
    color: var(--gold-soft);
    padding: 10px 20px;
    border-radius: 999px;
    font-size:0.82rem;
    letter-spacing:0.03em;
    opacity:0;
    pointer-events:none;
    transition: opacity 0.25s ease, transform 0.25s ease;
    z-index: 20;
    white-space:nowrap;
  }
  .toast.show{
    opacity:1;
    transform: translateX(-50%) translateY(0);
  }

  .notice{
    margin-top: 16px;
    padding: 14px 16px;
    background: rgba(201,162,77,0.06);
    border: 1px solid rgba(201,162,77,0.22);
    border-radius: 12px;
    font-size:0.8rem;
    line-height:1.65;
    color: var(--cream-dim);
  }
  .notice b{ color: var(--gold-soft); font-weight:500; }
  .notice .req-name{ color: var(--cream); font-weight:400; }

  /* ---------- Footer ---------- */
  footer{
    margin-top: 40px;
    text-align:center;
  }
  footer .fop{
    font-size:0.74rem;
    color: var(--cream-dim);
    letter-spacing:0.03em;
    font-weight:300;
    line-height:1.6;
  }
  footer .mark{
    margin-top:14px;
    font-family:'Cormorant Garamond', serif;
    font-style:italic;
    font-size:0.95rem;
    color: var(--gold-dim);
    letter-spacing:0.04em;
  }

  @media (max-width: 380px){
    h1{ font-size:2.15rem; }
    .link-btn{ padding:13px 16px; }
  }

  /* ---------- Theme toggle ---------- */
  .theme-toggle{
    position: fixed;
    top: 18px;
    right: 18px;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--surface);
    border: 1px solid var(--line);
    color: var(--gold);
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    z-index: 30;
    transition: background 0.35s ease, border-color 0.25s ease, transform 0.2s ease;
  }
  .theme-toggle:hover{
    border-color: var(--gold-dim);
    transform: translateY(-1px);
  }
  .theme-toggle svg{
    width:19px;
    height:19px;
  }
  .theme-toggle .icon-sun{ display:none; }
  .theme-toggle .icon-moon{ display:block; }
  html[data-theme="light"] .theme-toggle .icon-sun{ display:block; }
  html[data-theme="light"] .theme-toggle .icon-moon{ display:none; }