/* Mock 1, sweet and simple. A picture book: Santa holds the letter and the guest reads along.
   Phone: one column. From 700px: greeting beside the letter, then the list in two or three columns. */
:root{
  --sky:#DCE8F3; --snow:#FFFFFF; --paper:#FFF7E6; --ink:#1D2A44; --ink-soft:#44506B;
  --red:#C4332A; --red-dark:#9E251E; --green:#1B6A50; --green-pale:#E2F1EA; --gold:#F0B94A; --line:#B9C9DA;
  --display:"Baloo 2","Trebuchet MS",sans-serif; --body:"Andika","Verdana",sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--sky);color:var(--ink);font:400 19px/1.55 var(--body);
  background-image:radial-gradient(circle at 20px 30px,#fff 0 2.5px,transparent 3px),radial-gradient(circle at 130px 90px,#fff 0 2px,transparent 2.5px),radial-gradient(circle at 70px 150px,#fff 0 1.5px,transparent 2px),radial-gradient(circle at 170px 190px,#fff 0 2.5px,transparent 3px);
  background-size:210px 230px}
h1,h2,h3,p,ul{margin:0}
ul{padding:0;list-style:none}
img,svg{display:block}
.nc-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px;border-radius:6px}
.wrap{max-width:1240px;margin:0 auto;padding:12px 16px 0}

.who{display:flex;justify-content:flex-end}
.who>span{display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:2px 14px 0 10px;border-radius:20px;background:var(--snow);font:600 17px/1 var(--display)}
.who svg{margin-top:-2px}

.hello{padding:18px 0 6px}
.hello h1{font:700 34px/1.1 var(--display);color:var(--red-dark)}
.hello p{margin-top:6px;font-size:20px;line-height:1.45}
.jump{display:inline-flex;align-items:center;gap:8px;min-height:48px;margin-top:8px;color:var(--ink);font:600 19px/1.2 var(--display);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}

/* Santa holds the letter: his beard and mittens lie over the top edge of the paper, where there is no text. */
.letterbox{position:relative;margin-top:8px}
.santa{position:relative;z-index:1;width:100%;height:auto;margin-bottom:-11.5%;pointer-events:none}
.letter{position:relative;background:var(--paper);border-radius:6px 6px 22px 22px;padding:15% 22px 26px;box-shadow:0 3px 0 var(--line)}
.letter__hi{font:700 24px/1.2 var(--display);margin-bottom:12px}
.letter__body p{margin-bottom:14px}
.letter__ps{margin-top:14px}
.letter__sign{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:4px 10px;text-align:right;margin-top:16px;font:700 24px/1.1 var(--display);color:var(--red)}

.note{margin-top:22px;padding:16px 18px;background:var(--snow);border-radius:22px;border:2px dashed var(--line)}
.note b{font-weight:700}

.list-head{margin:34px 0 12px}
.list-head h2{font:700 30px/1.1 var(--display)}
.list-head p{font-size:18px;color:var(--ink-soft)}

.gifts{display:grid;gap:14px}
.gift{background:var(--snow);border-radius:26px;padding:16px;display:flex;flex-direction:column;gap:12px;border:3px solid transparent}
.gift__top{display:flex;gap:14px;align-items:flex-start}
.gift__pic{flex:none;width:92px;height:92px;border-radius:50%;background:var(--sky);padding:9px}
.gift__txt{min-width:0}
.gift__wanted{display:flex;align-items:center;gap:6px;font:600 16px/1.2 var(--display);color:var(--ink);margin-bottom:2px}
.gift__name{font:700 21px/1.18 var(--display)}
.gift__note{font-size:17px;line-height:1.4;color:var(--ink-soft);margin-top:3px}
.gift__price{font:700 21px/1.2 var(--display);margin-top:6px}
.gift__foot{margin-top:auto;display:flex;flex-direction:column;gap:6px}
.gift__next{font-size:17px;line-height:1.4;padding:2px 0 6px}
.taken-head{margin:30px 0 12px;font:700 24px/1.1 var(--display)}
.end{margin-top:26px;font-size:18px}

.btn,.nc-btn{display:flex;align-items:center;justify-content:center;width:100%;min-height:54px;padding:6px 18px 4px;border-radius:28px;border:0;font:700 20px/1.15 var(--display);cursor:pointer;text-align:center}
.btn--take,.nc-btn--main{background:var(--red);color:#fff;box-shadow:0 4px 0 var(--red-dark)}
.btn--take:active,.nc-btn--main:active{transform:translateY(2px);box-shadow:0 2px 0 var(--red-dark)}
.btn--release,.nc-btn--quiet{background:var(--snow);color:var(--ink);border:2px solid var(--ink);min-height:50px;font-weight:600;font-size:18px}

.nc-link{display:flex;align-items:center;gap:8px;min-height:44px;color:var(--ink);font-size:18px;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:4px}
.nc-link b{font-weight:700}
.nc-out{flex:none}
.nc-noshop{font-size:17px;line-height:1.4;color:var(--ink-soft);padding:8px 0}

.state{display:flex;align-items:center;gap:10px;min-height:54px;padding:8px 16px;border-radius:28px;font:700 19px/1.2 var(--display)}
.state svg{flex:none}
.gift.is-other .state{background:var(--ink);color:#fff}
.gift.is-mine{border-color:var(--green);background:var(--green-pale)}
.gift.is-mine .state{background:var(--green);color:#fff}
.gift.is-mine .gift__pic{background:#fff}

.ground{margin-top:36px;width:100%;height:auto}
.nc-mocknote{margin:0;padding:10px 16px 18px;background:#fff;font-size:16px;text-align:center}
.nc-mocknote a{color:var(--ink);display:inline-block;padding:10px 4px}

/* The confirmation: a sheet from the bottom on a phone, a card in the middle on a laptop. */
.nc-dialog{border:0;padding:0;background:transparent;color:var(--ink);width:100%;max-width:100%;max-height:100%;margin:auto 0 0}
.nc-dialog::backdrop{background:rgba(29,42,68,.62)}
.nc-dialog__box{background:var(--paper);border-radius:28px 28px 0 0;padding:22px 20px 22px;display:grid;grid-template-columns:84px 1fr;gap:6px 14px;align-items:center}
.nc-dialog__pic{width:84px;height:84px;border-radius:50%;background:var(--sky);padding:8px}
.nc-dialog__ask{font-size:18px;color:var(--ink-soft)}
.nc-dialog__title{font:700 23px/1.15 var(--display)}
.nc-dialog__price{font:700 19px/1.2 var(--display);margin-top:2px}
.nc-dialog__text{grid-column:1/-1;margin-top:8px;font-size:18px;line-height:1.5}
.nc-dialog__actions{grid-column:1/-1;display:grid;gap:12px;margin-top:14px}
.nc-dialog[data-kind="race"] .nc-dialog__ask{font:700 20px/1.2 var(--display);color:var(--red)}

@media (min-width:700px){
  .wrap{padding:16px 32px 0}
  .top{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);grid-template-rows:auto auto auto 1fr;gap:12px clamp(24px,4vw,48px);align-items:start}
  .who{grid-column:1/-1}
  .hello{padding-top:56px}
  .hello h1{font-size:52px}
  .hello p{font-size:24px;max-width:22em}
  .letterbox{grid-column:2;grid-row:2/5;margin-top:0}
  .letter{padding:15% 40px 32px}
  .note{grid-column:1;margin-top:18px;align-self:start;max-width:30em}
  .list-head{margin-top:56px}
  .list-head h2{font-size:40px}
  .gifts{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
  .nc-dialog{margin:auto;max-width:480px}
  .nc-dialog__box{border-radius:28px;padding:28px}
}
@media (min-width:1120px){
  .gifts{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (prefers-reduced-motion:no-preference){
  .santa__head{transform-box:fill-box;transform-origin:50% 100%;animation:peek .8s .15s cubic-bezier(.2,.8,.3,1.3) both}
  @keyframes peek{from{transform:translateY(26px) rotate(-3deg)}to{transform:none}}
}

/* Added for the real pages. */
.who a{color:var(--ink);font:600 17px/1 var(--display);min-height:44px;display:inline-flex;align-items:center;margin-right:14px;text-underline-offset:4px}
.gift form{margin:0}
.gift:focus{outline:3px solid var(--ink);outline-offset:3px}
.links{display:flex;flex-wrap:wrap;gap:0 18px}
.flash{margin:0 0 14px;padding:14px 18px;border-radius:22px;background:var(--ink);color:#fff;font:600 19px/1.35 var(--display)}
.closed{margin:0 0 14px;padding:14px 18px;border-radius:22px;background:var(--snow);border:2px solid var(--ink);font:600 19px/1.35 var(--display)}
.confirm{max-width:520px;margin:40px auto}
.confirm .nc-dialog__box{border-radius:28px}
.confirm a.nc-btn{text-decoration:none}
.nolink{min-height:100vh;display:grid;place-items:center;padding:24px 16px}
.nolink main{width:100%;max-width:480px}
.nolink .letter h1{font:700 30px/1.12 var(--display);color:var(--red-dark);text-wrap:balance}
.nolink .letter p{margin-top:10px}
.contact{margin:4px 0 0}
.contact a{display:inline-flex;align-items:center;min-height:44px;color:var(--ink);font-weight:700;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
@media (min-width:700px){.nolink .letter h1{font-size:38px}}

/* The owner view: plain tables, the same colours. */
.owner{max-width:1100px;margin:0 auto;padding:16px 16px 60px}
.owner h1{font:700 34px/1.1 var(--display);color:var(--red-dark)}
.owner h2{font:700 26px/1.1 var(--display);margin:34px 0 10px}
.owner p{margin-top:6px}
.owner a{color:var(--ink)}
.owner .box{background:var(--snow);border-radius:18px;padding:6px 14px;overflow-x:auto}
.owner table{border-collapse:collapse;width:100%;font-size:17px;line-height:1.35}
.owner th,.owner td{text-align:left;vertical-align:top;padding:10px 12px 10px 0;border-bottom:2px solid var(--sky)}
.owner tr:last-child td{border-bottom:0}
.owner th{font:700 17px/1.2 var(--display)}
.owner form{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:4px 0}
.owner select,.owner input[type=text]{font:inherit;font-size:17px;min-height:44px;padding:4px 10px;border:2px solid var(--ink);border-radius:10px;background:#fff;color:var(--ink);max-width:100%}
.owner input[type=text]{width:min(100%,430px)}
.owner button{font:600 17px/1.1 var(--display);min-height:44px;padding:4px 16px 2px;border-radius:22px;border:2px solid var(--ink);background:#fff;color:var(--ink);cursor:pointer}
.owner .warn{background:#FFE9C2;border-radius:14px;padding:10px 14px;margin-top:10px}
.owner .ua{color:var(--ink-soft);font-size:16px;word-break:break-word}
.owner .mut{color:var(--ink-soft)}