/* gift.ceo — a public record, so it should read like one: paper, ink, one
   accent, and nothing that moves unless a person asked it to. */

:root{
  --bg:#faf9f7;
  --paper:#ffffff;
  --ink:#1c1b19;
  --dim:#6b6864;
  --faint:#94908a;
  --line:#e6e3de;
  --line-soft:#f0ede8;
  --accent:#9a6f10;
  --accent-soft:#f5efe1;
  --ok:#2f6f4f;
  --warn:#8a5a20;
  --shadow:0 1px 2px rgba(28,27,25,.04), 0 8px 24px -16px rgba(28,27,25,.18);
  --radius:12px;
  --serif:ui-serif,Georgia,"Iowan Old Style","Times New Roman",serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
}

@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#131211;
    --paper:#1b1a18;
    --ink:#f2f0ec;
    --dim:#a09b93;
    --faint:#7d7871;
    --line:#2b2926;
    --line-soft:#232120;
    --accent:#d9a63c;
    --accent-soft:#2a2318;
    --ok:#6cc296;
    --warn:#d1a05e;
    --shadow:0 1px 2px rgba(0,0,0,.3), 0 8px 24px -16px rgba(0,0,0,.6);
  }
}
:root[data-theme="dark"]{
  --bg:#131211;
  --paper:#1b1a18;
  --ink:#f2f0ec;
  --dim:#a09b93;
  --faint:#7d7871;
  --line:#2b2926;
  --line-soft:#232120;
  --accent:#d9a63c;
  --accent-soft:#2a2318;
  --ok:#6cc296;
  --warn:#d1a05e;
  --shadow:0 1px 2px rgba(0,0,0,.3), 0 8px 24px -16px rgba(0,0,0,.6);
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font:16px/1.65 var(--sans);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block;}
a{color:var(--ink);text-underline-offset:3px;text-decoration-color:var(--line);}
a:hover{text-decoration-color:var(--accent);}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px;}

.wrap{max-width:940px;margin:0 auto;padding-left:26px;padding-right:26px;}
.narrow{max-width:660px;}

/* A long domain or an unbroken word must wrap rather than push the page
   sideways; on a phone that is the difference between a readable column and
   one that runs off the screen. */
body{overflow-wrap:break-word;}

/* ------------------------------------------------------------- masthead */

.masthead{
  border-bottom:1px solid var(--line);
  background:var(--bg);
  position:sticky;top:0;z-index:40;
}
.masthead .wrap{
  display:flex;align-items:center;gap:18px;
  min-height:62px;
}
.wordmark{
  font:700 1.12rem/1 var(--sans);
  letter-spacing:-.02em;
  text-decoration:none;
  white-space:nowrap;
}
.wordmark .dot{color:var(--accent);}
.masthead nav{
  display:flex;align-items:center;gap:20px;
  margin-left:auto;
  font-size:.9rem;
}
.masthead nav a{color:var(--dim);text-decoration:none;white-space:nowrap;}
.masthead nav a:hover{color:var(--ink);}

.langpick{
  appearance:none;
  background:transparent;
  border:1px solid var(--line);
  color:var(--dim);
  border-radius:999px;
  padding:5px 26px 5px 11px;
  font:inherit;font-size:.85rem;
  cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--faint) 50%),linear-gradient(135deg,var(--faint) 50%,transparent 50%);
  background-position:calc(100% - 13px) calc(50% + 1px),calc(100% - 9px) calc(50% + 1px);
  background-size:4px 4px,4px 4px;
  background-repeat:no-repeat;
}
.langpick:hover{color:var(--ink);border-color:var(--accent);}

/* ------------------------------------------------------------- buttons */

.btn{
  display:inline-block;
  background:var(--ink);color:var(--bg);
  border:1px solid var(--ink);
  border-radius:999px;
  padding:11px 22px;
  font:600 .94rem/1.2 var(--sans);
  text-decoration:none;cursor:pointer;
  transition:opacity .15s;
}
.btn:hover{opacity:.85;}
.btn[disabled]{opacity:.4;cursor:not-allowed;}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--line);}
.btn--ghost:hover{border-color:var(--accent);opacity:1;}
.btn--gold{background:var(--accent);border-color:var(--accent);color:#fff;}
.btn--sm{padding:7px 15px;font-size:.86rem;}

/* ------------------------------------------------------------- hero */

.hero{padding:76px 0 8px;text-align:center;}
.badge{
  display:inline-block;
  font-size:.78rem;color:var(--dim);
  border:1px solid var(--line);border-radius:999px;
  padding:5px 13px;margin-bottom:26px;
}
.hero h1{
  margin:0;
  font:800 clamp(2.4rem,7vw,4rem)/1.02 var(--sans);
  letter-spacing:-.035em;
}
.hero h1 .dot{color:var(--accent);}
.tagline{
  margin:20px 0 0;
  font:400 clamp(1.35rem,3.4vw,1.9rem)/1.25 var(--serif);
  letter-spacing:-.01em;
}
.hero-sub{margin:14px auto 0;max-width:34em;color:var(--dim);}

.hero-actions{margin-top:32px;display:flex;gap:12px;justify-content:center;flex-wrap:wrap;}

.lede{
  margin:64px auto 0;max-width:36em;
  font:400 1.09rem/1.7 var(--serif);
  color:var(--ink);
}

/* ------------------------------------------------------------- sections */

.section{padding:66px 0;}
.section + .section{border-top:1px solid var(--line-soft);}
.section h2{
  margin:0 0 26px;
  font:700 .78rem/1 var(--sans);
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--faint);
}
.section h2 .count{color:var(--accent);letter-spacing:0;}

.steps{display:grid;gap:26px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));}
.step{padding-top:16px;border-top:2px solid var(--accent);}
.step .n{
  display:block;font:700 .78rem/1 var(--mono);
  color:var(--accent);margin-bottom:9px;letter-spacing:.08em;
}
.step p{margin:0;color:var(--dim);font-size:.95rem;}

.why{
  background:var(--accent-soft);
  border-radius:var(--radius);
  padding:32px 34px;
}
.why h3{margin:0 0 10px;font:600 1.12rem/1.3 var(--sans);letter-spacing:-.01em;}
.why p{margin:0;color:var(--dim);max-width:40em;}

/* ------------------------------------------------------------- gift cards */

.feed{display:grid;gap:14px;}
.gift{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:22px 24px;
  box-shadow:var(--shadow);
  display:grid;
  grid-template-columns:auto 1fr;
  gap:4px 18px;
  text-decoration:none;color:inherit;
}
a.gift:hover{border-color:var(--accent);}
.gift .num{
  grid-row:1/span 3;
  font:700 .95rem/1 var(--mono);
  color:var(--accent);
  padding-top:4px;
  white-space:nowrap;
}
.gift .kind{
  font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--faint);
}
.gift h3{margin:3px 0 6px;font:600 1.16rem/1.35 var(--sans);letter-spacing:-.012em;}
.gift .body{margin:0;color:var(--dim);font-size:.95rem;}
.gift .by{
  margin-top:12px;padding-top:11px;border-top:1px solid var(--line-soft);
  font-size:.86rem;color:var(--dim);
  display:flex;flex-wrap:wrap;gap:5px 10px;align-items:center;
}
.gift .by strong{font-weight:600;color:var(--ink);}
.gift .logo{width:20px;height:20px;border-radius:4px;object-fit:contain;background:var(--bg);}

.pill{
  font-size:.72rem;letter-spacing:.07em;text-transform:uppercase;
  border:1px solid var(--line);border-radius:999px;padding:2px 9px;color:var(--faint);
}
.pill--active{color:var(--ok);border-color:currentColor;}
.pill--ended,.pill--withdrawn{color:var(--faint);}

/* ------------------------------------------------------------- companies */

.companies{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));}
.company{
  display:flex;align-items:center;gap:13px;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  padding:14px 16px;text-decoration:none;color:inherit;
}
.company:hover{border-color:var(--accent);}
.company img,.company .initial{
  width:34px;height:34px;border-radius:7px;flex:0 0 34px;
  object-fit:contain;background:var(--bg);
  display:grid;place-items:center;
  font:700 .95rem/1 var(--sans);color:var(--faint);
}
.company .nm{font-weight:600;font-size:.95rem;letter-spacing:-.01em;}
.company .seat{font:.76rem/1.4 var(--mono);color:var(--accent);}

.empty{
  border:1px dashed var(--line);border-radius:var(--radius);
  padding:38px 24px;text-align:center;color:var(--faint);font-size:.95rem;
}

/* ------------------------------------------------------------- forms */

.field{margin-bottom:18px;}
.field label{display:block;font-size:.86rem;font-weight:600;margin-bottom:6px;}
.field .hint{font-size:.82rem;color:var(--faint);margin:5px 0 0;}
input[type=text],input[type=url],input[type=date],input[type=email],select,textarea{
  width:100%;
  background:var(--paper);color:var(--ink);
  border:1px solid var(--line);border-radius:9px;
  padding:11px 13px;font:inherit;font-size:.95rem;
}
textarea{min-height:120px;resize:vertical;line-height:1.6;}
input:focus,select:focus,textarea:focus{border-color:var(--accent);outline:none;}
.check{display:flex;gap:10px;align-items:flex-start;margin-bottom:14px;font-size:.9rem;color:var(--dim);}
.check input{margin-top:4px;flex:0 0 auto;}

.card{
  background:var(--paper);border:1px solid var(--line);
  border-radius:var(--radius);padding:28px 30px;box-shadow:var(--shadow);
}
.note{
  border-left:3px solid var(--accent);
  padding:2px 0 2px 15px;margin:18px 0;
  color:var(--dim);font-size:.92rem;
}
.error{
  background:var(--accent-soft);border:1px solid var(--accent);
  color:var(--ink);border-radius:9px;padding:12px 15px;font-size:.92rem;margin:16px 0;
}
.error:empty{display:none;}

/* ------------------------------------------------------------- footer */

.foot{
  border-top:1px solid var(--line);
  margin-top:70px;padding:34px 0 56px;
  font-size:.85rem;color:var(--faint);
}
.foot .smallprint{max-width:48em;margin:0 0 16px;line-height:1.6;}
.foot .links{display:flex;gap:18px;flex-wrap:wrap;}
.foot a{color:var(--faint);}

.prose h1{font:700 2rem/1.2 var(--sans);letter-spacing:-.025em;margin:0 0 8px;}
.prose h2{
  font:600 1.1rem/1.3 var(--sans);letter-spacing:-.01em;
  margin:34px 0 8px;color:var(--ink);text-transform:none;
}
.prose p,.prose li{color:var(--dim);}
.prose li{margin-bottom:6px;}
.updated{color:var(--faint);font-size:.85rem;margin:0 0 30px;}

.skeleton{
  border-radius:var(--radius);background:var(--line-soft);
  height:86px;margin-bottom:14px;
}

/* --------------------------------------------------------------- sponsors */

.sponsors{
  border-top:1px solid var(--line-soft);
  padding:44px 0 0;text-align:center;
}
.sponsors h2{margin-bottom:18px;}
.sponsor{
  display:inline-flex;align-items:center;gap:10px;
  border:1px solid var(--line);border-radius:999px;
  padding:10px 20px;text-decoration:none;color:var(--ink);
  font-weight:600;font-size:.95rem;letter-spacing:-.01em;
}
.sponsor:hover{border-color:var(--accent);}
.sponsor .dot{color:var(--accent);}
.sponsor small{display:block;font-weight:400;color:var(--dim);font-size:.82rem;letter-spacing:0;}

/* On a phone the text sat almost against the glass. The column gets more air
   than the desktop rule gives it, and the cards keep their own padding on top
   of that, so nothing reads off the edge. */
@media (max-width:560px){
  /* The two jump links are a convenience on a wide screen and a wrapped,
     two-line masthead on a narrow one. The page they point at is directly
     below anyway. */
  .masthead .nav-jump{display:none;}
  .masthead .wrap{gap:12px;min-height:56px;flex-wrap:nowrap;}
  .masthead nav{gap:14px;flex-shrink:0;}
  .wordmark{font-size:1.05rem;}

  /* Centred prose on a phone reaches both edges on every line at once, which
     is what makes it feel pressed against the glass. Ragged-right gives the
     eye somewhere to rest and a real margin to see. */
  .lede{text-align:left;margin:44px 0 18px;}
  .hero-sub{text-align:left;}
  .hero{padding:52px 0 4px;}
  .section{padding:48px 0;}
  .gift{grid-template-columns:1fr;gap:0;padding:20px 18px;}
  .gift .num{grid-row:auto;padding:0 0 6px;}
  .masthead nav{gap:14px;font-size:.86rem;}
  .why{padding:26px 20px;}
  .card{padding:24px 18px;}
  .hero h1{font-size:clamp(2.1rem,11vw,3rem);}
  .lede{font-size:1.02rem;}
}

/* Very narrow phones keep most of the margin — the type comes down instead of
   the air, because 26px of nothing either side is what makes a line readable
   in the hand. */
@media (max-width:380px){
  .wrap{padding-left:22px;padding-right:22px;}
  .masthead nav{gap:11px;font-size:.82rem;}
  .langpick{padding:4px 22px 4px 9px;font-size:.8rem;}
  .gift{padding:18px 16px;}
  .card{padding:22px 16px;}
}