@font-face { font-family: "Playfair Display"; src: url("/assets/fonts/playfair-display-latin-wght-normal.woff2") format("woff2-variations"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/assets/fonts/inter-latin-wght-normal.woff2") format("woff2-variations"); font-weight: 300 700; font-display: swap; }
:root { --night:#0d221c; --night2:#17372b; --ink:#17231f; --muted:#64736b; --paper:#edf0ec; --panel:#f8faf7; --line:#cbd4cf; --leaf:#8ec8b1; --rust:#a6563c; --focus:#2f718e; }
* { box-sizing:border-box; } html { background:var(--paper); scroll-behavior:smooth; } body { margin:0; color:var(--ink); background:var(--paper); font:16px/1.5 "Inter",system-ui,sans-serif; } button,input { font:inherit; } a { color:inherit; } :focus-visible { outline:3px solid var(--focus); outline-offset:3px; }
.skip-link { position:fixed; z-index:5; top:.75rem; left:.75rem; transform:translateY(-180%); padding:.65rem 1rem; background:white; font-weight:700; } .skip-link:focus { transform:translateY(0); }
.site-header { min-height:5rem; display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1rem clamp(1rem,4vw,4rem); color:white; background:var(--night); } .brand { display:flex; align-items:center; gap:.7rem; text-decoration:none; } .brand-mark { display:grid; width:2.35rem; height:2.35rem; place-items:center; border:1px solid var(--leaf); color:var(--leaf); font-family:"Playfair Display",serif; font-weight:700; } .brand span:last-child { display:grid; } .brand strong { font:700 1.1rem "Playfair Display",serif; } .brand small { color:#ffffff91; font-size:.68rem; text-transform:uppercase; letter-spacing:.08em; } .back-link { color:#ffffffb8; font-size:.87rem; text-underline-offset:.25rem; }
main { padding-bottom:6rem; } .intro,.workspace,.results { max-width:76rem; margin-inline:auto; } .intro { padding:clamp(4rem,9vw,7.5rem) clamp(1rem,4vw,4rem) clamp(3rem,6vw,5rem); } .eyebrow,.step-label { margin:0 0:.6rem; color:var(--rust); font-size:.7rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase; } h1,h2 { margin:0; font-family:"Playfair Display",serif; line-height:1; text-wrap:balance; } h1 { max-width:14ch; font-size:clamp(3.1rem,7vw,6.4rem); } .intro > p:last-child { max-width:43rem; margin:1.6rem 0 0; color:var(--muted); font-size:clamp(1rem,1.6vw,1.18rem); line-height:1.7; }
.workspace { display:grid; grid-template-columns:minmax(0,2fr) minmax(18rem,1fr); background:var(--panel); box-shadow:0 18px 48px #0a1f1820; } .settings-panel,.method-panel { padding:clamp(1.5rem,4vw,3.25rem); } .method-panel { color:white; background:var(--night2); } .panel-heading { display:flex; justify-content:space-between; gap:2rem; margin-bottom:2rem; } h2 { font-size:clamp(2rem,4vw,3.1rem); } .panel-heading > p { max-width:18rem; margin:.2rem 0 0; color:var(--muted); font-size:.88rem; } .field-row { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; } .field { margin-bottom:1rem; } label { display:block; margin-bottom:.45rem; color:#435249; font-size:.8rem; font-weight:700; } input[type="date"],input[type="number"] { width:100%; min-height:3.15rem; padding:.7rem .85rem; border:1px solid var(--line); border-radius:.25rem; color:var(--ink); background:white; } .check { display:flex; align-items:flex-start; gap:.55rem; margin-top:1.25rem; color:var(--ink); font-size:.88rem; font-weight:500; } input[type="checkbox"] { width:1.1rem; height:1.1rem; margin:.1rem 0 0; accent-color:var(--night); } .hint,.caveat { color:var(--muted); font-size:.82rem; line-height:1.55; } .primary-action { min-height:3rem; border:1px solid var(--night); border-radius:.25rem; padding:.75rem 1.1rem; color:white; background:var(--night); font-weight:700; cursor:pointer; } .primary-action:hover { background:var(--night2); } .primary-action:disabled { cursor:wait; opacity:.65; } .status-line { min-height:1.5rem; margin:.8rem 0 0; color:var(--muted); font-size:.84rem; } .inline-error { margin:1rem 0; padding:.8rem 1rem; border-left:4px solid #8b3528; background:#f9eae6; color:#63251b; } .inline-error p { margin:0; }
.method-panel .step-label { color:var(--leaf); } .method-panel ol { display:grid; gap:1.5rem; margin:2rem 0; padding:0; list-style:none; counter-reset:method; } .method-panel li { display:grid; grid-template-columns:2.2rem minmax(0,1fr); column-gap:.5rem; } .method-panel li::before { grid-row:1 / span 2; content:counter(method, decimal-leading-zero); counter-increment:method; color:var(--leaf); font-size:.7rem; font-weight:700; } .method-panel li > strong,.method-panel li > span { grid-column:2; } .method-panel strong { display:block; margin-bottom:.2rem; } .method-panel span { color:#ffffffa8; font-size:.88rem; text-wrap:pretty; } .method-panel .caveat { padding-top:1.3rem; border-top:1px solid #ffffff2e; color:#ffffffa8; }
.results { margin-top:3rem; padding:clamp(1.5rem,4vw,3.25rem); background:white; box-shadow:0 18px 48px #0a1f1814; } .results-heading { display:flex; justify-content:space-between; align-items:start; gap:2rem; margin-bottom:2rem; } .results-heading p { max-width:42rem; margin:1rem 0 0; color:var(--muted); } .total { min-width:4rem; color:var(--night); font:700 clamp(3rem,7vw,5.5rem)/.85 "Playfair Display",serif; text-align:right; font-variant-numeric:tabular-nums; } .table-wrap { overflow-x:auto; } table { width:100%; border-collapse:collapse; } th,td { padding:1rem .8rem; border-bottom:1px solid #e3e8e4; text-align:left; vertical-align:top; } th { color:var(--muted); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; } td strong,td em { display:block; } td em { margin-top:.22rem; color:var(--muted); } td a { color:#245c48; font-weight:700; text-underline-offset:.22rem; white-space:nowrap; } .record-link { display:inline-block; margin-top:.5rem; } .tabular { font-variant-numeric:tabular-nums; } .empty { margin:0; padding:1rem 0 0; color:var(--muted); }
@media (max-width:700px) { .workspace { grid-template-columns:1fr; } .panel-heading { display:block; } .panel-heading > p { margin-top:1rem; } .field-row { grid-template-columns:1fr; gap:0; } .results-heading { align-items:end; } th,td { padding:.8rem .55rem; } th:nth-child(3),td:nth-child(3) { display:none; } }