/* McCarthy-O'Sullivan Brand Guidelines v1.1 — locked: Void Black, McCarthy Gold.
       Surface / hairline / ivory / ash are working values pending the v1.1 extended palette.
       Structure (09/04, "Two Doors"): nav · hero · Free tools | Members · footer. Zero JavaScript.
       Gold budget: the mark (stag + M·O), the hero rule, the button outline, the motto,
       and ONE rim — the Members panel. Free tools sit in charcoal; the gold rim is the tier. */
    :root{
      --void:#0A0A0A; --gold:#C8A961; --surface:#151515; --hairline:#262626;
      --ivory:#EDE6D6; --ash:#8F8A7F;
      --serif:"Cinzel",Georgia,"Times New Roman",serif;
      --sans:"Archivo","Helvetica Neue",Arial,sans-serif;
    }
    *{box-sizing:border-box;margin:0;padding:0}
    html{background:var(--void);color:var(--ivory);-webkit-text-size-adjust:100%;scroll-behavior:smooth}
    body{font-family:var(--sans);font-weight:400;line-height:1.6;min-height:100vh;display:flex;flex-direction:column}
    a{color:inherit}
    a:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
    .wrap{width:min(100% - 2.5rem,72rem);margin-inline:auto}

    /* nav */
    .nav{border-bottom:1px solid var(--hairline)}
    .nav .wrap{display:flex;align-items:center;gap:1.5rem;padding:1rem 0}
    .monogram{font-family:var(--serif);font-weight:600;letter-spacing:.18em;font-size:1.15rem;color:var(--gold);text-decoration:none}
    .nav ul{list-style:none;display:flex;align-items:center;gap:1.5rem;margin-left:auto;font-size:.85rem;letter-spacing:.1em;text-transform:uppercase}
    .nav ul a{color:var(--ash);text-decoration:none}
    .nav ul a:hover{color:var(--ivory)}
    .nav ul a.btn{color:var(--ivory)}
    .nav ul a.btn:hover{color:var(--void)}

    /* hero — the Monogram, shortened so both doors show on a laptop */
    .hero{text-align:center;padding:clamp(2.5rem,6vw,4rem) 0 clamp(2rem,5vw,3rem)}
    .stag{display:block;height:clamp(150px,20vw,210px);width:auto;margin:0 auto 1.25rem}
    h1{font-family:var(--serif);font-weight:500;font-size:clamp(1.9rem,4.8vw,3.4rem);letter-spacing:.06em;line-height:1.1}
    .rule{width:4.5rem;height:2px;background:var(--gold);margin:1.5rem auto}
    .lede{font-size:clamp(1.05rem,1.6vw,1.25rem);color:var(--ash);max-width:36ch;margin-inline:auto}

    /* two doors */
    .doors{padding:0 0 clamp(3.5rem,9vw,6rem)}
    .doors .wrap{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;align-items:stretch}
    @media (max-width:760px){.doors .wrap{grid-template-columns:1fr}}
    .door{background:var(--surface);border:1px solid var(--hairline);padding:clamp(1.5rem,3vw,2.25rem);display:flex;flex-direction:column;gap:1.25rem}
    .door.members{border-color:var(--gold)}
    .door h2{font-family:var(--serif);font-weight:500;font-size:1.35rem;letter-spacing:.06em}
    .door .sub{color:var(--ash);font-size:.95rem;margin-top:-.75rem}
    .tool{border-top:1px solid var(--hairline);padding-top:1.25rem}
    .tool h3{font-family:var(--serif);font-weight:500;font-size:1.15rem;letter-spacing:.04em;margin-bottom:.4rem}
    .tool p{color:var(--ash);margin-bottom:1.1rem;font-size:.95rem}
    .list{list-style:none;border-top:1px solid var(--hairline)}
    .list li{display:flex;flex-wrap:wrap;align-items:baseline;gap:.35rem 1rem;padding:.9rem 0;border-bottom:1px solid var(--hairline)}
    .list a{font-family:var(--serif);font-weight:500;font-size:1.05rem;letter-spacing:.04em;text-decoration:none}
    .list a:hover{text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:.3em}
    .list span{color:var(--ash);font-size:.9rem}
    .members p{color:var(--ivory)}
    .members .fine{color:var(--ash);font-size:.85rem;line-height:1.6;margin-top:auto}
    .members .actions{display:flex;flex-wrap:wrap;align-items:center;gap:1.25rem}
    .members .actions a:not(.btn){color:var(--ash);font-size:.9rem;letter-spacing:.06em;text-decoration:none}
    .members .actions a:not(.btn):hover{color:var(--ivory)}

    .btn{display:inline-block;padding:.7rem 1.4rem;border:1px solid var(--gold);color:var(--ivory);text-decoration:none;font-size:.85rem;letter-spacing:.1em;text-transform:uppercase}
    .btn:hover{background:var(--gold);color:var(--void)}
    .btn.small{padding:.5rem 1rem;font-size:.75rem}
    code{font-family:ui-monospace,"JetBrains Mono",Menlo,monospace;font-size:.9em;color:var(--ivory)}

    footer{border-top:1px solid var(--hairline);padding:2.25rem 0;text-align:center}
    footer .wrap{display:flex;flex-direction:column;align-items:center;gap:.5rem}
    .motto{font-family:var(--serif);font-weight:500;font-size:.95rem;letter-spacing:.06em;color:var(--gold)}
    .copy{font-size:.8rem;color:var(--ash);letter-spacing:.04em}
    .copy a{color:var(--ash);text-decoration:none;margin-left:1rem}
    .copy a:hover{color:var(--ivory)}
  

    /* tools page */
    .page{padding:clamp(2.5rem,6vw,4rem) 0 clamp(1.5rem,4vw,2.5rem);text-align:center}
    .page h1{font-size:clamp(1.8rem,4.2vw,2.8rem)}
    .grid{padding:0 0 clamp(3.5rem,9vw,6rem)}
    .grid .wrap{display:grid;grid-template-columns:repeat(auto-fill,minmax(20rem,1fr));gap:1.5rem}
    .card{background:var(--surface);border:1px solid var(--hairline);padding:clamp(1.5rem,3vw,2rem);display:flex;flex-direction:column}
    .card h2{font-family:var(--serif);font-weight:500;font-size:1.2rem;letter-spacing:.04em;margin-bottom:.5rem}
    .card p{color:var(--ash);font-size:.95rem;margin-bottom:1.25rem}
    .card .btn{margin-top:auto;align-self:flex-start}
    .more{margin-top:.25rem}
    .more a{color:var(--ash);font-size:.9rem;letter-spacing:.06em;text-decoration:none}
    .more a:hover{color:var(--ivory)}

    /* calculator pages */
    .calc{padding:0 0 clamp(3.5rem,9vw,6rem)}
    .calc .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1.5rem;align-items:start}
    @media (max-width:820px){.calc .wrap{grid-template-columns:1fr}}
    .panel{background:var(--surface);border:1px solid var(--hairline);padding:clamp(1.5rem,3vw,2rem)}
    .panel h2{font-family:var(--serif);font-weight:500;font-size:1.2rem;letter-spacing:.06em;margin-bottom:1rem}
    fieldset{border:0;margin:0 0 1rem}
    legend,label{display:block;font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ash);margin-bottom:.4rem}
    .modes{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:1.25rem}
    .modes label{margin:0;padding:.5rem .9rem;border:1px solid var(--hairline);color:var(--ash);cursor:pointer;font-size:.75rem;text-transform:uppercase;letter-spacing:.08em}
    .modes input{position:absolute;opacity:0;pointer-events:none}
    .modes input:checked + label{border-color:var(--gold);color:var(--ivory)}
    .modes input:focus-visible + label{outline:2px solid var(--gold);outline-offset:2px}
    .field{margin-bottom:1rem}
    .two{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
    input[type=number],select{width:100%;padding:.65rem .75rem;background:var(--void);border:1px solid var(--hairline);color:var(--ivory);font:inherit;font-size:1rem}
    input:focus,select:focus{outline:none;border-color:var(--gold)}
    .unit{display:flex;align-items:center;gap:.5rem}
    .unit input[type=number]{flex:1}
    .unit select{width:auto}
    .presets{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.4rem}
    .presets button{margin:0;padding:.25rem .6rem;border:1px solid var(--hairline);color:var(--ash);background:transparent;font:inherit;font-size:.75rem;cursor:pointer}
    .presets button:hover{border-color:var(--gold);color:var(--ivory);background:transparent}
    .hint{font-size:.8rem;color:var(--ash);margin-top:.35rem}
    .hidden{display:none}
    .result{border-top:1px solid var(--hairline);padding-top:1.25rem}
    .big{font-family:var(--serif);font-weight:500;font-size:clamp(2rem,4vw,2.8rem);letter-spacing:.02em;line-height:1.1}
    .big small{font-family:var(--sans);font-size:.95rem;color:var(--ash);letter-spacing:.04em;margin-left:.5rem}
    .verdict{margin:.75rem 0 1rem;padding:.65rem .8rem;border:1px solid var(--hairline);font-size:.9rem}
    .verdict.ok{border-color:#8fbf9f;color:#8fbf9f}.verdict.warn{border-color:var(--gold);color:var(--gold)}.verdict.high{border-color:#d9776b;color:#d9776b}
    dl{display:grid;grid-template-columns:auto 1fr;gap:.35rem 1rem;font-size:.9rem}
    dt{color:var(--ash)}dd{font-variant-numeric:tabular-nums}
    .work{margin-top:1.25rem;font-size:.85rem;color:var(--ash);line-height:1.6}
    .work code{font-size:.85em}
    .note{margin-top:1.5rem;padding:1rem;border:1px solid var(--hairline);font-size:.85rem;color:var(--ash);line-height:1.6}
    .note strong{color:var(--ivory);font-weight:500}
    .err{color:#d9776b;font-size:.9rem;margin-top:.5rem;min-height:1.2em}
    .cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(20rem,1fr));gap:1.5rem}
    .list li{justify-content:space-between}
    .list li button{margin:0;padding:.15rem .55rem;border:1px solid var(--hairline);color:var(--ash);background:transparent;font:inherit;cursor:pointer}
    .list li button:hover{border-color:var(--gold);color:var(--ivory);background:transparent}