/* thomas.cr — draft v0.1
   Palette and proportions carried over from the current Carrd site. */

/* ---------- Inter, served from this server (no Google Fonts request) ----------
   Variable files from Google Fonts Inter v20, latin and latin-ext subsets.
   One file covers every weight, so 300/400/700 cost a single download. */
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('assets/fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('assets/fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter'; font-style: italic; font-weight: 100 900; font-display: swap;
  src: url('assets/fonts/inter-latin-italic.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter'; font-style: italic; font-weight: 100 900; font-display: swap;
  src: url('assets/fonts/inter-latin-ext-italic.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --bg: #1E2326;
  --ink: #FFFFFF;
  --ink-soft: rgba(255,255,255,.72);
  --ink-mute: rgba(255,255,255,.45);
  --col: 28rem;                 /* the single column, ~448px like today */
  /* the alternating muted tones of the current button rows */
  --t1: #63646C; --t2: #404B52; --t3: #949C9D; --t4: #817977;
  --t5: #636C66; --t6: #8B919F; --t7: #A9A09D;
  --doing:    #63646C;
  --thinking: #817977;
  --being:    #636C66;
  --accent: #E65315;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bg); color: var(--ink); }
body { line-height: 1.35; -webkit-font-smoothing: antialiased; min-height: 100vh; display: flex; justify-content: center; padding: 2rem 1rem 3rem; }
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: none; }
button { font: inherit; }

.site { width: 100%; max-width: var(--col); }

/* ---------- hero ---------- */
.hero { position: relative; overflow: hidden; background: #2a3033; aspect-ratio: 448 / 432; }
.hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 20%; filter: saturate(.55) contrast(1.02); opacity: .92; }
.hero-inner { position: absolute; left: 0; right: 0; bottom: 0; padding: 0 2.25rem 2.25rem; background: linear-gradient(to top, rgba(30,35,38,.55), rgba(30,35,38,0) 70%); }
.title { margin: 0; font-weight: 700; font-size: 2.55rem; line-height: 1.08; letter-spacing: -.01em; text-shadow: 0 2px 18px rgba(0,0,0,.35); }

/* ---------- accordion ---------- */
.nav { display: flex; flex-direction: column; }
.row { display: flex; align-items: center; width: 100%; border: 0; text-align: right; color: var(--ink); cursor: pointer; padding: 0 2.25rem; min-height: 4.5rem; background: var(--t1); transition: filter .18s ease; }
.row:hover { filter: brightness(1.08); }
.row .glyph { width: 1rem; height: 1rem; flex: 0 0 1rem; fill: var(--ink); }
.row .label { flex: 1; font-size: 1.05rem; font-weight: 400; letter-spacing: .01em; }
.row .caret { width: .75rem; height: .75rem; margin-left: 1rem; fill: var(--ink); opacity: .7; transition: transform .2s ease; }
.row[aria-expanded="true"] .caret { transform: rotate(90deg); }

/* level 1: Doing / Thinking / Being */
.l1 > .row { font-weight: 700; }
.l1 > .row .label { font-weight: 700; font-size: 1.15rem; text-transform: uppercase; letter-spacing: .06em; }
.l1[data-key="Doing"]    > .row { background: var(--doing); }
.l1[data-key="Thinking"] > .row { background: var(--thinking); }
.l1[data-key="Being"]    > .row { background: var(--being); }

/* level 2 */
.l2 > .row { min-height: 3.6rem; background: rgba(255,255,255,.06); }
.l2 > .row .label { font-size: .88rem; text-transform: uppercase; letter-spacing: .08em; }
.l2 > .row .glyph { opacity: .55; width: .8rem; height: .8rem; flex-basis: .8rem; }

/* level 3 (optional grouping) */
.l3 > .row { min-height: 2.8rem; background: rgba(255,255,255,.035); }
.l3 > .row .label { font-size: .74rem; text-transform: uppercase; letter-spacing: .14em; opacity: .7; }
.l3 > .row .glyph { opacity: .3; width: .6rem; height: .6rem; flex-basis: .6rem; }

.panel { display: none; flex-direction: column; }
.open > .panel { display: flex; }

/* leaves: the title is the navigation, the panel holds description + link */
.leaf > .row { min-height: 3.1rem; background: rgba(255,255,255,.02); border-top: 1px solid rgba(255,255,255,.05); }
.leaf > .row .label { font-size: .95rem; font-weight: 400; }
.leaf > .row .glyph { visibility: hidden; }
.leaf > .row .caret { opacity: .45; }
.leaf.open > .row { background: rgba(255,255,255,.05); }
.leaf.open > .row .label { font-weight: 700; }
.leaf > .row.plain { display: flex; }
.leaf > .row.static { cursor: default; }
.leaf > .row.static:hover { filter: none; }
.leaf .go + .go { margin-top: .35rem; }
.leaf > .row .arrow { font-size: .8rem; opacity: .45; margin-left: 1rem; transform: none; }
.leaf > .panel { padding: .2rem 2.25rem 1.3rem; text-align: right; align-items: flex-end; background: rgba(255,255,255,.05); }
.leaf .d { margin: 0; font-size: .86rem; line-height: 1.5; color: var(--ink-soft); font-weight: 300; }
.leaf .go { display: inline-block; margin-top: .7rem; font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink); opacity: .8; border-bottom: 1px solid rgba(255,255,255,.3); padding-bottom: .1rem; }
.leaf .go:hover { opacity: 1; }

/* particles over the hero */
.particles { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; mix-blend-mode: screen; }

/* ---------- message modal ---------- */
.modal { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.modal[hidden] { display: none; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(14,17,19,.78); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.modal-card { position: relative; width: 100%; max-width: 26rem; background: #262c30; padding: 2rem 2rem 1.75rem; box-shadow: 0 30px 80px rgba(0,0,0,.6); animation: rise .22s ease-out; }
@keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.modal-title { margin: 0 0 1.25rem; font-size: 1.25rem; font-weight: 700; }
.modal-close { position: absolute; top: .6rem; right: .8rem; background: none; border: 0; color: var(--ink-mute); font-size: 1.6rem; line-height: 1; cursor: pointer; }
.modal-close:hover { color: var(--ink); }
.modal-close:focus-visible { outline: 1px solid rgba(255,255,255,.35); outline-offset: 2px; color: var(--ink); }
.legal-link:focus-visible { outline: 1px solid rgba(255,255,255,.35); outline-offset: 3px; }
.modal form { display: flex; flex-direction: column; gap: .6rem; }
.modal input, .modal textarea { font: inherit; font-size: .95rem; color: var(--ink); background: rgba(255,255,255,.06); border: 0; padding: .95rem 1.1rem; width: 100%; }
.modal textarea { min-height: 8rem; resize: vertical; }
.modal input::placeholder, .modal textarea::placeholder { color: var(--ink-mute); }
.modal input:focus, .modal textarea:focus { outline: 1px solid rgba(232,196,82,.6); }
.modal button[type="submit"] { align-self: flex-end; background: var(--ink); color: var(--bg); border: 0; padding: .9rem 1.6rem; font-weight: 700; letter-spacing: .08em; cursor: pointer; }
body.modal-open { overflow: hidden; }
.modal .hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.modal .status { margin: .4rem 0 0; min-height: 1.2em; font-size: .85rem; color: var(--ink-mute); text-align: right; }
.modal .status.ok { color: #E8C452; }
.modal .status.err { color: #E6906B; }
.modal .status a { color: var(--ink); border-bottom: 1px solid rgba(255,255,255,.3); }
.modal button[type="submit"]:disabled { opacity: .5; cursor: default; }

/* ---------- footer / verbosity slider ---------- */
.footer { margin-top: 3rem; display: flex; flex-direction: column; align-items: center; gap: .4rem; }
.verbosity { display: flex; align-items: center; gap: .8rem; color: var(--ink-mute); font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; }
.verbosity input { -webkit-appearance: none; appearance: none; width: 9rem; height: 2px; background: rgba(255,255,255,.18); outline: none; }
.verbosity input::-webkit-slider-thumb { -webkit-appearance: none; width: .8rem; height: .8rem; border-radius: 50%; background: var(--ink-mute); cursor: pointer; }
.verbosity input::-moz-range-thumb { width: .8rem; height: .8rem; border: 0; border-radius: 50%; background: var(--ink-mute); cursor: pointer; }
.verbosity input:hover::-webkit-slider-thumb { background: var(--ink); }
.fine { margin: 0; display: flex; align-items: center; gap: .9rem; font-size: .65rem; color: rgba(255,255,255,.25); letter-spacing: .05em; }
.legal-link { color: rgba(255,255,255,.35); border-bottom: 1px solid rgba(255,255,255,.12); padding-bottom: .1rem; transition: color .18s ease, border-color .18s ease; }
.legal-link:hover { color: var(--ink-soft); border-bottom-color: rgba(255,255,255,.35); }

/* ---------- legal modal ---------- */
.modal-legal .modal-card { max-width: 32rem; max-height: min(82vh, 46rem); display: flex; flex-direction: column; padding: 2rem 0 0; }
.modal-legal .modal-title { padding: 0 2rem; flex: 0 0 auto; }
.legal-body { overflow-y: auto; padding: 0 2rem 1.75rem; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.legal-body section + section { margin-top: 1.5rem; }
.legal-body h3 { margin: 0 0 .45rem; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--ink-mute); }
.legal-body p { margin: 0 0 .7rem; font-size: .84rem; line-height: 1.6; font-weight: 300; color: var(--ink-soft); }
.legal-body p:last-child { margin-bottom: 0; }
.legal-updated { margin-top: 1.75rem !important; font-size: .7rem !important; color: var(--ink-mute); }

@media (max-width: 480px) {
  body { padding: 0 0 2rem; }
  .row, .leaf > .panel, .hero-inner { padding-left: 1.25rem; padding-right: 1.25rem; }
  .modal-legal .modal-title, .legal-body { padding-left: 1.5rem; padding-right: 1.5rem; }
  .fine { flex-wrap: wrap; justify-content: center; gap: .8rem; }
  .title { font-size: 2.1rem; }
}