:root{
  --ground:#2A1A14; --shadow:#1C110C; --mid:#3E2A22; --line:#4a3326;
  --cream:#F1E8DC; --muted:#B09884; --soft:#8A7A60; --accent:#d48057;
  --display:"Poppins",sans-serif; --serif:"Lora",Georgia,serif;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{background:var(--ground);color:var(--cream);font-family:var(--display);font-weight:400;line-height:1.5;
  min-height:100vh;display:flex;align-items:flex-start;justify-content:center;padding:32px 18px}
.wrap{width:100%;max-width:560px}
.brand{display:flex;align-items:center;gap:10px;margin-bottom:24px}
.brand-word{text-transform:uppercase;letter-spacing:.22em;font-size:12px;font-weight:500;color:var(--muted)}
.eyebrow{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);font-weight:500;display:block;margin-bottom:8px}
h1{font-family:var(--display);font-weight:500;text-transform:uppercase;letter-spacing:-.02em;font-size:34px;line-height:1;margin-bottom:8px}
.sub{font-family:var(--serif);font-style:italic;font-size:16px;color:var(--accent);margin-bottom:24px}

.card{background:rgba(62,42,34,.35);border:.5px solid var(--line);border-radius:16px;padding:22px}
.field{margin-bottom:16px}
.field:last-child{margin-bottom:0}
label{display:block;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-weight:500;margin-bottom:7px}
select,input{width:100%;background:var(--shadow);border:.5px solid var(--line);border-radius:9px;color:var(--cream);
  font-family:var(--display);font-size:15px;padding:11px 12px;-webkit-appearance:none;appearance:none}
select{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' stroke='%23B09884' stroke-width='1.5' fill='none'/></svg>");
  background-repeat:no-repeat;background-position:right 14px center}
input:focus,select:focus{outline:none;border-color:var(--accent)}
.row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.hint{font-size:11px;color:var(--soft);margin-top:6px}

.result{margin-top:22px;border-top:.5px solid var(--line);padding-top:20px}
.big{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;margin-bottom:6px}
.big .draw{font-family:var(--display);font-weight:500;font-size:40px;letter-spacing:-.02em;line-height:1;color:var(--cream)}
.big .units{font-family:var(--display);font-weight:500;font-size:20px;color:var(--accent)}
.sentence{font-family:var(--serif);font-style:italic;font-size:15px;color:var(--muted);line-height:1.45;margin:10px 0 16px}
.meta-row{display:flex;gap:24px;flex-wrap:wrap;font-size:12px;color:var(--soft);margin-bottom:18px}
.meta-row b{color:var(--cream);font-weight:500}
.copy{width:100%;background:var(--accent);color:var(--shadow);border:none;border-radius:9px;font-family:var(--display);
  font-weight:500;font-size:14px;letter-spacing:.04em;text-transform:uppercase;padding:13px;cursor:pointer;transition:opacity .15s}
.copy:hover{opacity:.9}
.copy.done{background:var(--mid);color:var(--cream)}
.checklist{list-style:none;display:flex;flex-direction:column;gap:11px}
.checklist li{position:relative;padding-left:24px;font-size:13.5px;color:var(--cream);line-height:1.4}
.checklist li::before{content:"";position:absolute;left:0;top:5px;width:11px;height:7px;
  border-left:1.6px solid var(--accent);border-bottom:1.6px solid var(--accent);transform:rotate(-45deg)}
.foot{font-size:10.5px;color:var(--soft);line-height:1.6;margin-top:18px;text-align:center}
.foot strong{color:var(--muted);font-weight:500}

/* =========================================================================
   Integration with the site chrome.
   This file came from a standalone one-page app: it makes <body> a centred
   flex row, which pushed the theme footer alongside the calculator, and it
   carries neither the link reset nor the site typefaces. Everything below
   only overrides that, so the page reads as part of the site.
   ========================================================================= */
:root{
  --display:"Neue Haas Grotesk Display","Söhne","Inter",system-ui,sans-serif;
  --serif:"Instrument Serif","GT Super Text","Tiempos",serif;
  --body:"DM Sans","Söhne Buch",system-ui,sans-serif;
  --hairline:#D4C4A8;
}
body{display:block;padding:0;font-family:var(--body);font-size:14px}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}

.wrap{max-width:620px;margin:0 auto;padding:150px 20px 96px}
.wrap > .brand{display:none}            /* the nav already carries the wordmark */
.wrap .eyebrow{margin-bottom:16px}
h1{font-weight:400;font-size:clamp(44px,6.5vw,72px);letter-spacing:-.035em;line-height:.95;margin-bottom:14px}
.sub{font-size:clamp(17px,2vw,20px);line-height:1.3;margin-bottom:28px;max-width:460px}
.card{border-radius:20px;padding:26px}
label{font-family:var(--body)}
select,input{font-family:var(--body)}
.big .draw{font-weight:400;font-size:clamp(40px,6vw,52px)}
.big .units{font-weight:400}
.copy{font-family:var(--body);border-radius:999px;letter-spacing:.16em;font-size:11px;padding:15px}
.checklist li{font-family:var(--body)}
.foot{max-width:520px;margin-left:auto;margin-right:auto}

@media (max-width:768px){ .wrap{padding:120px 18px 72px} }

/* --- The nav is shared chrome: undo the app's .brand rules ------------ */
.nav .brand{margin-bottom:0}
.nav .brand-word{font-family:var(--display);font-size:13px;font-weight:400;letter-spacing:.18em;color:#F1E8DC}
.nav .links,.nav .tail{font-weight:400}
.skip-link.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}