/* Tokens from brand guidelines v0.1 */
:root {
  --sky: #D7E3EE; --first-light: #EEF3F7; --paper: #FAF8F5; --peach: #F4CDB4;
  --ink: #1C1B1A; --stone: #8A8580; --stone-small: #5E5A56; /* darker stone for small text on sky (contrast) */
  --bare: #E6C2B8; --rose: #C98A84; --rouge: #A8141C;
  --serif: 'Instrument Serif', Georgia, serif;
  --sans: 'Archivo', system-ui, sans-serif;
  --margin: 8vmin;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; background: var(--sky); }
body { color: var(--ink); font: 400 16px/1.62 var(--sans); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hp { position: absolute; left: -9999px; }
[hidden] { display: none !important; }

.caption { font-size: 12px; line-height: 18px; letter-spacing: .04em; font-stretch: 112%; }
.muted { color: var(--stone-small); }
.serif { font-family: var(--serif); letter-spacing: -.01em; }
.big { font-size: 28px; line-height: 1.25; }
.error { color: var(--rouge); min-height: 18px; }

/* the field: light from the left + grain. Text and form sit clean above it. */
.field { position: fixed; inset: 0; z-index: 0; }
.light { position: absolute; inset: 0; background: linear-gradient(110deg, rgba(255,236,220,.30), rgba(255,255,255,0) 45%, rgba(190,206,228,.22)); }
.grain { position: absolute; inset: 0; opacity: .35; mix-blend-mode: overlay; background-size: 200px 200px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0.33 0.33 0.33 0 0 0.33 0.33 0.33 0 0 0.33 0.33 0.33 0 0 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* one screen: wordmark / object / form */
.page { position: relative; z-index: 1; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; align-items: center;
  padding: max(var(--margin), env(safe-area-inset-top)) var(--margin) max(calc(var(--margin) * .6), env(safe-area-inset-bottom)); text-align: center; }
header { height: 3vh; min-height: 22px; display: flex; align-items: center; }
.wordmark { font-family: var(--serif); font-size: clamp(16px, 2.4vh, 22px); letter-spacing: -.01em; line-height: 1; }
.wordmark.grotesk { font-family: var(--sans); font-weight: 200; font-stretch: 125%; letter-spacing: .08em; font-size: clamp(13px, 1.9vh, 17px); }

.object { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; min-height: 0; padding: 3vh 0; }
.bottle { position: relative; height: clamp(120px, 19vh, 210px); }
.bottle img { display: block; height: 100%; width: auto; position: relative; z-index: 1; }
.shadow { position: absolute; left: 55%; bottom: -5px; width: 120%; height: 10px; border-radius: 50%; background: rgba(60,55,55,.2); filter: blur(5px); }
figcaption { display: flex; flex-direction: column; gap: 2px; }

.bottom { width: 100%; max-width: 380px; display: flex; flex-direction: column; gap: 14px; }
.batch { font-family: var(--serif); font-size: 17px; line-height: 1.3; }

.line { display: flex; align-items: flex-end; gap: 20px; border-bottom: 1px solid var(--ink); padding-bottom: 8px; }
.line:focus-within { box-shadow: 0 1px 0 var(--ink); }
.line input { flex: 1; min-width: 0; border: 0; background: transparent; font: 16px/1.4 var(--sans); color: var(--ink); outline: none; border-radius: 0; text-align: left; }
.line input::placeholder { color: var(--stone-small); }
.line button, .link { border: 0; background: none; color: var(--ink); cursor: pointer; letter-spacing: .04em; font-family: inherit; }
.link:not(.caption) { font-size: inherit; }
.link.caption { font-size: 12px; line-height: 18px; font-stretch: 112%; }
.line button { font-size: 15px; }
.line button:disabled { color: var(--stone); cursor: default; }
.link:hover { text-decoration: underline; text-underline-offset: 3px; }
.link.muted { color: var(--stone-small); }
.meta { display: flex; justify-content: space-between; gap: 16px; text-align: left; }
.meta .link { white-space: nowrap; flex: none; }
.code { margin-top: 2px; }
.inner-note { display: flex; flex-direction: column; gap: 2px; margin-bottom: 4px; }
.inner-note .serif { font-size: 20px; }

#thanks-view { display: flex; flex-direction: column; gap: 14px; }
#thanks-view:focus, #thanks-title:focus { outline: none; }
.shades { border: 0; display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
#shade-options { display: flex; justify-content: center; gap: 22px; }
.shade { display: flex; align-items: center; gap: 8px; border: 0; background: none; font: 12px/18px var(--sans); letter-spacing: .04em; color: var(--stone-small); cursor: pointer; padding: 6px 2px; }
.shade i { width: 12px; height: 12px; border-radius: 50%; transition: box-shadow .15s; }
.shade[aria-pressed="true"] { color: var(--ink); }
.shade[aria-pressed="true"] i { box-shadow: 0 0 0 3px var(--sky), 0 0 0 4px var(--ink); }
.refer { display: flex; gap: 14px; align-items: center; border-bottom: 1px solid var(--stone); padding-bottom: 6px; }
.refer input { flex: 1; min-width: 0; border: 0; background: none; font: 12px/18px var(--sans); color: var(--stone-small); outline: none; }

footer { margin-top: 10px; }

@media (min-width: 760px) {
  .bottle { height: clamp(150px, 20vh, 230px); }
}
@media (max-height: 640px) {
  .object { gap: 10px; padding: 2vh 0; }
  .bottom { gap: 10px; }
}