/* getdecante.com. The app's look (docs/DESIGN.md): an ivory tablecloth in afternoon sun, paper
   laid on it, bordeaux ink, and what a person says written by hand. Photos carry the page. */

@font-face { font-family: 'Bricolage Grotesque'; font-weight: 600; font-display: swap; src: url(fonts/BricolageGrotesque-SemiBold.woff) format('woff'); }
@font-face { font-family: 'Bricolage Grotesque'; font-weight: 700; font-display: swap; src: url(fonts/BricolageGrotesque-Bold.woff) format('woff'); }
@font-face { font-family: 'Figtree'; font-weight: 400; font-display: swap; src: url(fonts/Figtree-Regular.woff) format('woff'); }
@font-face { font-family: 'Figtree'; font-weight: 500; font-display: swap; src: url(fonts/Figtree-Medium.woff) format('woff'); }
@font-face { font-family: 'Figtree'; font-weight: 600; font-display: swap; src: url(fonts/Figtree-SemiBold.woff) format('woff'); }
@font-face { font-family: 'Figtree'; font-weight: 700; font-display: swap; src: url(fonts/Figtree-Bold.woff) format('woff'); }
@font-face { font-family: 'Reenie Beanie'; font-weight: 400; font-display: swap; src: url(fonts/ReenieBeanie-Regular.woff) format('woff'); }

:root {
  --cloth: #EFE6D6;
  --paper: rgba(251, 247, 240, .92);
  --cream: #FFFCF7;
  --hairline: rgba(74, 20, 36, .12);
  --rule: rgba(74, 20, 36, .16);
  --ink: #4A1424;
  --ink-2: #7A4A58;
  --ink-3: #7D6771;
  --accent: #7A1E36;
  --accent-soft: rgba(122, 30, 54, .10);
  --bordeaux: linear-gradient(160deg, #8F2A45, #6A1830);
  --friend: #9A5F12;
  --friend-soft: rgba(201, 130, 42, .14);
  --table: #C9822A;
  --on-accent: #FBF3EA;
  --r-nope: #9F8A93; --r-meh: #A87A3B; --r-decent: #C2664F; --r-like: #C8354F; --r-love: #7A1E36;
  --display: 'Bricolage Grotesque', 'Avenir Next', 'Helvetica Neue', sans-serif;
  --body: 'Figtree', -apple-system, 'Helvetica Neue', sans-serif;
  --hand: 'Reenie Beanie', 'Bradley Hand', cursive;
  --r-s: 12px; --r-m: 16px; --r-l: 20px;
  --gutter: 16px;
  --max: 1160px;
  color-scheme: light;
}
@media (min-width: 720px) { :root { --gutter: 32px; } }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; color: var(--ink); background-color: var(--cloth); font: 400 17px/1.55 var(--body);
  -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration-color: rgba(122, 30, 54, .35); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3 { margin: 0; font-family: var(--display); font-weight: 600; letter-spacing: -0.02em; text-wrap: balance; line-height: 1.04; }
p { margin: 0; text-wrap: pretty; }
.hand { font-family: var(--hand); font-weight: 400; letter-spacing: 0; line-height: .9; color: var(--accent); }
.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.eyebrow { font: 700 12px/1 var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.lead { font-size: 19px; color: var(--ink-2); max-width: 34em; }
@media (min-width: 720px) { .lead { font-size: 21px; } }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- the cloth: grain, a linen weave, sun from the upper left, a fold of shade ---------- */
.cloth { position: fixed; inset: 0; z-index: -1; background: var(--cloth); pointer-events: none; }
.cloth::before { content: ''; position: absolute; inset: 0; opacity: .5;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.42  0 0 0 0 0.28  0 0 0 0 0.24  0 0 0 0.16 0'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>"); }
.cloth::after { content: ''; position: absolute; inset: 0;
  background:
    repeating-linear-gradient(0deg, rgba(74,20,36,.018) 0 1px, transparent 1px 2px),
    repeating-linear-gradient(90deg, rgba(74,20,36,.018) 0 1px, transparent 1px 2px),
    radial-gradient(90% 60% at 0% 0%, rgba(255, 232, 190, .7), transparent 60%),
    radial-gradient(60% 40% at 100% 70%, rgba(120, 70, 60, .10), transparent 70%),
    linear-gradient(168deg, transparent 55%, rgba(120, 70, 60, .08) 62%, transparent 70%); }

/* ---------- top and bottom ---------- */
.top { position: sticky; top: 0; z-index: 10; transition: background .2s, box-shadow .2s; }
.top.scrolled { background: rgba(255, 252, 247, .55); backdrop-filter: blur(14px) saturate(130%); -webkit-backdrop-filter: blur(14px) saturate(130%);
  box-shadow: 0 1px 0 rgba(255,255,255,.8), 0 1px 0 1px var(--hairline); }
.top .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 68px; }
.logo { display: block; flex: none; }
.logo img { height: 34px; width: auto; }
@media (min-width: 720px) { .logo img { height: 40px; } }
.nav { display: flex; align-items: center; gap: 4px; font-weight: 600; font-size: 15px; }
.nav a { text-decoration: none; padding: 10px 12px; border-radius: 999px; }
.nav a:hover { background: var(--accent-soft); }
.nav .hide-s { display: none; }
@media (min-width: 720px) { .nav .hide-s { display: block; } }

.foot { margin-top: 96px; padding: 48px 0 40px; border-top: 1px solid var(--rule); font-size: 15px; color: var(--ink-2); }
.foot .wrap { display: grid; gap: 28px; }
.foot .logo img { height: 30px; }
.foot nav { display: flex; flex-wrap: wrap; gap: 6px 22px; font-weight: 600; color: var(--ink); }
.foot small { font-size: 13.5px; color: var(--ink-3); }
@media (min-width: 720px) { .foot .wrap { grid-template-columns: 1fr auto; align-items: center; } .foot small { grid-column: 1 / -1; } }

/* ---------- buttons: one filled thing per screen ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; padding: 0 22px;
  border-radius: var(--r-s); font: 600 16px/1 var(--body); text-decoration: none; white-space: nowrap; }
.btn-main { background: var(--bordeaux); color: var(--on-accent); }
.btn-main:hover { filter: brightness(1.08); }
.btn-line { border: 1.5px solid var(--accent); color: var(--accent); background: var(--accent-soft); }
.btn svg { width: 20px; height: 20px; flex: none; }
.btn small { display: block; font: 500 11px/1 var(--body); opacity: .8; margin-bottom: 3px; letter-spacing: .02em; }
.ctas { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* ---------- paper ---------- */
.paper { background: var(--paper); border: 1px solid var(--hairline); border-radius: var(--r-l);
  box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 10px 24px -20px rgba(74, 20, 36, .5); }

/* ---------- photos. A slot says which shot goes in it until there is one. ---------- */
.photo { position: relative; margin: 0; overflow: hidden; border-radius: var(--r-l); background: #3a1d22;
  box-shadow: 0 18px 40px -24px rgba(60, 20, 30, .7); isolation: isolate; }
.photo img { width: 100%; height: 100%; object-fit: cover; }
.photo.slot { --h1: #6b2a2e; --h2: #2a1416; --glow: rgba(255, 196, 120, .55);
  background: radial-gradient(70% 60% at 30% 25%, var(--glow), transparent 70%), linear-gradient(160deg, var(--h1), var(--h2)); }
.photo.slot::before { content: ''; position: absolute; inset: 0; opacity: .55; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/></filter><rect width='200' height='200' filter='url(%23n)'/></svg>"); }
.photo.slot figcaption.shot { position: absolute; inset: auto 16px 14px 16px; z-index: 1; color: rgba(255, 244, 228, .92);
  font: 400 26px/.95 var(--hand); text-shadow: 0 1px 8px rgba(0,0,0,.3); }
.photo.slot figcaption.shot::before { content: 'photo · '; font: 700 10px/1 var(--body); letter-spacing: .14em; text-transform: uppercase;
  display: block; margin-bottom: 6px; opacity: .7; }
.photo.slot .doodle { position: absolute; z-index: 1; right: 14px; top: 12px; width: 64px; color: rgba(255, 238, 214, .5); }
.photo.warm  { --h1: #8a4a2a; --h2: #33170f; --glow: rgba(255, 210, 140, .6); }
.photo.dusk  { --h1: #5a2436; --h2: #1f0f17; --glow: rgba(255, 170, 130, .45); }
.photo.day   { --h1: #b88a5c; --h2: #5d3a26; --glow: rgba(255, 240, 200, .7); }
.photo.green { --h1: #4d5236; --h2: #1d1e14; --glow: rgba(255, 220, 150, .5); }
.credit { margin-top: 8px; font-size: 13px; color: var(--ink-3); }

/* ---------- hero ---------- */
.hero { padding: 28px 0 40px; }
.hero .wrap { display: grid; gap: 40px; }
.hero h1 { font-size: clamp(44px, 11vw, 76px); }
@media (min-width: 900px) { .hero h1 { font-size: clamp(56px, 5.6vw, 76px); } }
.hero h1 .hand { display: inline-block; font-size: 1.15em; transform: rotate(-4deg) translateY(.06em); margin-left: .05em; }
.hero .lead { margin-top: 22px; }
.hero .ctas { margin-top: 30px; }
.hero .soon { font-size: 14px; color: var(--ink-3); margin-top: 14px; }
.collage { position: relative; min-height: 440px; margin-bottom: 12px; }
.collage .big { position: absolute; inset: 0 0 60px 14%; transform: rotate(1.5deg); }
.collage .small { position: absolute; left: 0; bottom: 0; width: 46%; aspect-ratio: 4 / 5; transform: rotate(-4deg); border: 6px solid var(--cream); }
.collage .big figcaption.shot { inset: 18px 24px auto 20px; }
.collage .big .doodle { width: 96px; top: auto; bottom: 16px; right: 18px; }
.collage .note { position: absolute; right: 0; bottom: -12px; background: var(--cream); padding: 14px 18px 12px; transform: rotate(3deg); text-align: center; }
.collage .note .hand { font-size: 46px; display: block; }
.collage .note span:last-child { font-size: 13px; color: var(--ink-3); }
@media (min-width: 900px) {
  .hero { padding: 48px 0 72px; }
  .hero .wrap { grid-template-columns: 1.05fr 1fr; align-items: center; gap: 56px; }
  .collage { min-height: 600px; }
}

/* ---------- sections ---------- */
.section { padding: 64px 0; }
@media (min-width: 900px) { .section { padding: 96px 0; } }
.section-head { max-width: 760px; margin-bottom: 40px; }
.section-head h2 { font-size: clamp(34px, 7vw, 58px); margin-top: 14px; }
.section-head .lead { margin-top: 18px; }

/* the four steps of a table */
.steps { display: grid; gap: 28px; counter-reset: step; }
@media (min-width: 720px) { .steps { grid-template-columns: 1fr 1fr; gap: 32px; } }
@media (min-width: 1080px) { .steps { grid-template-columns: repeat(4, 1fr); gap: 24px; } }
.step .photo { aspect-ratio: 4 / 5; }
.step:nth-child(even) .photo { transform: rotate(1deg); }
.step:nth-child(odd) .photo { transform: rotate(-1deg); }
.step h3 { display: flex; align-items: center; gap: 12px; font-size: 24px; margin: 22px 0 8px; }
.step h3 .num { position: relative; flex: none; width: 38px; height: 38px; display: grid; place-items: center; font: 400 28px/1 var(--hand); color: var(--accent); }
.step h3 .num svg { position: absolute; inset: 0; width: 100%; height: 100%; color: var(--accent); }
.step p { color: var(--ink-2); }

/* rating in a word */
.words { display: grid; gap: 32px; align-items: center; }
@media (min-width: 900px) { .words { grid-template-columns: 1fr 1fr; gap: 64px; } }
.scale { list-style: none; margin: 0; padding: 28px 24px; display: grid; gap: 6px; }
.scale li { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 4px 0; border-bottom: 1px dashed var(--rule); }
.scale li:last-child { border: 0; }
.scale .hand { font-size: 44px; }
.scale .n { font: 600 14px/1 var(--body); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.glass-row { display: flex; gap: 6px; align-items: flex-end; }

/* full-bleed band: the wine list */
.band { position: relative; color: var(--on-accent); padding: 0; }
.band .photo { border-radius: 0; box-shadow: none; position: absolute; inset: 0; }
.band .photo.slot figcaption.shot { inset: auto var(--gutter) 18px auto; text-align: right; max-width: 40%; }
.band .inner { position: relative; z-index: 1; display: grid; gap: 40px; padding-block: 72px; align-items: center; }
.band .inner::before { content: ''; position: absolute; inset: 0 calc(50% - 50vw); z-index: -1; background: linear-gradient(90deg, rgba(30, 10, 14, .7), rgba(30, 10, 14, .25) 70%, transparent); }
.band h2 { font-size: clamp(36px, 7vw, 60px); }
.band .lead { color: rgba(251, 243, 234, .85); margin-top: 18px; }
.band .eyebrow { color: rgba(251, 243, 234, .7); }
@media (min-width: 900px) { .band .inner { grid-template-columns: 1.1fr 1fr; padding-block: 120px; } }

/* ---------- the phone, drawn from the app's own parts ---------- */
.phone { position: relative; width: min(320px, 100%); aspect-ratio: 9 / 19.2; margin: 0 auto; border-radius: 46px; padding: 10px;
  background: #1C1216; box-shadow: 0 40px 80px -30px rgba(40, 10, 20, .7), inset 0 0 0 1.5px rgba(255,255,255,.12); }
.phone .screen { position: relative; height: 100%; border-radius: 37px; overflow: hidden; background: var(--cloth); color: var(--ink); font-size: 13px; line-height: 1.35; }
.phone .screen > .cloth { position: absolute; }
.phone .island { position: absolute; top: 9px; left: 50%; width: 92px; height: 26px; margin-left: -46px; border-radius: 20px; background: #000; z-index: 3; }
.phone .ui { position: relative; z-index: 1; padding: 52px 14px 14px; display: grid; gap: 10px; }
.phone img.shot { width: 100%; height: 100%; object-fit: cover; }
.ui .bar { display: flex; justify-content: space-between; align-items: center; }
.ui .bar img { height: 22px; }
.ui .eyebrow { font-size: 9.5px; margin-top: 4px; }
.ui .card { background: var(--paper); border: 1px solid var(--hairline); border-radius: 18px; overflow: hidden; }
.ui .card.live { border: 2px solid var(--accent); }
.ui .card .pic { height: 120px; position: relative; display: flex; align-items: flex-end; padding: 10px 12px; color: #fff; }
.ui .card .pic b { font: 600 15px/1.1 var(--display); text-shadow: 0 1px 6px rgba(0,0,0,.4); }
.ui .card .pic small { display: block; font-size: 10.5px; opacity: .85; margin-top: 2px; }
.ui .card .body { padding: 10px 12px; display: grid; gap: 8px; }
.ui .wine { display: flex; align-items: center; gap: 10px; }
.ui .wine .pour { width: 10px; height: 26px; border-radius: 3px 3px 5px 5px; flex: none; }
.ui .wine div { flex: 1; min-width: 0; }
.ui .wine b { display: block; font: 600 12.5px/1.2 var(--body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui .wine small { color: var(--ink-3); font-size: 10.5px; }
.ui .wine .hand { font-size: 22px; flex: none; }
.ui .faces { display: flex; }
.ui .face { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--cream); margin-left: -6px; display: grid; place-items: center; font: 700 10px/1 var(--body); color: var(--ink); background: #E6C9A8; }
.ui .face:first-child { margin-left: 0; }
.ui .row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ui .meta { font-size: 10.5px; color: var(--ink-3); }
.ui .fit { color: var(--accent); font-weight: 700; }
.ui .friend { color: var(--friend); }
.ui .line { padding: 9px 0; border-bottom: 1px solid var(--hairline); }
.ui .line:last-child { border: 0; }
.ui .chip { display: inline-block; padding: 4px 9px; border-radius: 999px; border: 1px solid var(--rule); font-size: 10.5px; font-weight: 600; background: rgba(255,255,255,.45); }
.ui .main { text-align: center; padding: 11px; border-radius: 10px; background: var(--bordeaux); color: var(--on-accent); font-weight: 600; }

/* ---------- places: photo cards, as the Places tab ---------- */
.places { display: grid; gap: 18px; grid-template-columns: 1fr; }
@media (min-width: 600px) { .places { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .places { grid-template-columns: repeat(3, 1fr); } }
.place { overflow: hidden; }
.place .photo { border-radius: 0; box-shadow: none; aspect-ratio: 4 / 3; }
.place .body { padding: 14px 16px 16px; display: grid; gap: 6px; }
.place h3 { font-size: 21px; }
.place .meta { font-size: 14px; color: var(--ink-3); }
.place .who { font-size: 14px; color: var(--friend); font-weight: 600; }
.place .chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.chip { display: inline-block; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--rule); font-size: 13px; font-weight: 600; background: rgba(255,255,255,.45); }

/* ---------- the recap: three Story cards ---------- */
.stories { display: flex; gap: 16px; overflow-x: auto; padding: 8px var(--gutter) 24px; margin: 0 calc(-1 * var(--gutter)); scroll-snap-type: x mandatory; }
.stories > * { flex: 0 0 min(240px, 70vw); scroll-snap-align: center; }
@media (min-width: 900px) { .stories { justify-content: center; overflow: visible; } .stories > :nth-child(1) { transform: rotate(-3deg) translateY(12px); } .stories > :nth-child(3) { transform: rotate(3deg) translateY(12px); } }
.story { aspect-ratio: 9 / 16; border-radius: 18px; overflow: hidden; position: relative; }
.story .photo { position: absolute; inset: 0; border-radius: 0; }
.story .over { position: absolute; inset: auto 0 0 0; z-index: 2; padding: 16px; color: #fff; background: linear-gradient(transparent, rgba(20, 6, 10, .75)); }
.story .over b { font: 600 22px/1.05 var(--display); display: block; }
.story .over small { font-size: 12px; opacity: .85; }
.story.list { background: var(--cloth); padding: 20px 16px; display: grid; align-content: start; gap: 10px; }
.story.list h4 { margin: 0 0 4px; font: 600 20px/1.1 var(--display); }

/* ---------- little things ---------- */
.trio { display: grid; gap: 18px; }
@media (min-width: 900px) { .trio { grid-template-columns: repeat(3, 1fr); } }
.trio .paper { padding: 24px; }
.trio h3 { font-size: 22px; margin: 14px 0 8px; }
.trio p { color: var(--ink-2); font-size: 16px; }
.trio svg { width: 54px; height: 54px; color: var(--accent); }

.closing { text-align: center; padding: 80px 0 24px; }
.closing .doodle { width: 170px; margin: 0 auto 16px; }
.closing h2 { font-size: clamp(40px, 9vw, 72px); }
.closing h2 .hand { display: block; font-size: .8em; margin-top: 8px; color: var(--ink-2); }
.closing .ctas { justify-content: center; margin-top: 30px; }

/* ---------- documents: privacy, terms, support ---------- */
.doc { padding: 24px 0 0; }
.doc .wrap { max-width: 860px; }
.doc header { padding: 24px 0 32px; }
.doc header h1 { font-size: clamp(40px, 9vw, 64px); }
.doc header p { margin-top: 14px; color: var(--ink-2); font-size: 18px; }
.doc header .meta { font-size: 14px; color: var(--ink-3); margin-top: 10px; }
.doc .sheet { padding: 28px 22px; }
@media (min-width: 720px) { .doc .sheet { padding: 48px 56px; } }
.doc .sheet h2 { font-size: 27px; margin: 44px 0 12px; scroll-margin-top: 90px; }
.doc .sheet h2:first-child { margin-top: 0; }
.doc .sheet h3 { font-size: 19px; margin: 26px 0 8px; }
.doc .sheet p, .doc .sheet li { color: var(--ink); font-size: 16.5px; }
.doc .sheet p + p { margin-top: 12px; }
.doc .sheet ul { padding-left: 1.2em; margin: 10px 0; }
.doc .sheet li + li { margin-top: 6px; }
.doc .sheet li::marker { color: var(--accent); }
.doc .short { background: var(--accent-soft); border-radius: var(--r-m); padding: 18px 20px; margin-bottom: 28px; }
.doc .short h2 { margin: 0 0 8px !important; font-size: 20px; }
.doc .toc { columns: 2 220px; font-size: 15px; margin: 0 0 8px; padding-left: 1.2em; }
.doc table { width: 100%; border-collapse: collapse; margin: 14px 0; font-size: 15px; }
.doc th, .doc td { text-align: left; vertical-align: top; padding: 10px 10px 10px 0; border-bottom: 1px solid var(--hairline); }
.doc th { font-weight: 700; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); }
.doc .table-scroll { overflow-x: auto; }
/* For Kjeld, before launch: points a lawyer or he should check. Deploy refuses while any are left (site/check.sh). */
.review { display: block; margin: 12px 0; padding: 10px 14px; border-left: 3px solid var(--table); background: var(--friend-soft); border-radius: 0 8px 8px 0;
  font-size: 14px !important; color: var(--friend) !important; }
.review::before { content: 'To check before launch · '; font-weight: 700; }