/* Nombur x National Day 96. Scene: a restaurant owner tapping an ad on their phone,
   in daylight, between a feed full of green-and-gold posts. So: paper, ink, one brand green. */
:root{
  --paper:oklch(97.4% 0.006 170);
  --sheet:oklch(99.3% 0.003 170);
  --ink:oklch(25% 0.006 170);
  --ink-2:oklch(46% 0.012 170);
  --rule:oklch(86% 0.01 170);
  --green:oklch(51% 0.08 168);        /* nombur #347763 */
  --green-deep:oklch(41% 0.07 168);
  --err:oklch(52% 0.17 28);
  --display:"Beiruti",sans-serif;
  --body:"Readex Pro",sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);    /* ease-out-expo */
  --gutter:clamp(16px,4vw,48px);
}
*{box-sizing:border-box;margin:0;padding:0}
body{font:400 1rem/1.65 var(--body);color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}

/* header */
header{display:flex;align-items:center;justify-content:space-between;height:64px;padding-inline:var(--gutter)}
header img{height:26px;width:auto}
.lang{font-weight:500;color:var(--ink);text-underline-offset:4px;text-decoration-thickness:1px}
.lang:hover{color:var(--green)}

/* page: copy + form on the start side, Aadil on the end side */
.page{position:relative;overflow-x:clip;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);min-height:calc(100svh - 64px)}
.copy{padding:clamp(24px,5vh,64px) var(--gutter) 64px;display:flex;flex-direction:column;gap:28px;max-width:720px}

.kicker{font-weight:600;color:var(--green)}
h1{font:900 clamp(2.5rem,5.4vw,4.4rem)/1.08 var(--display);letter-spacing:-.01em;text-wrap:balance}
html[lang="ar"] h1{line-height:1.2;letter-spacing:0}
h1 em{font-style:normal;color:var(--green)}
/* Beiruti ships a very narrow space */
:is(h1,h2,h3){word-spacing:.12em}
.sub{font-size:clamp(1.05rem,1.4vw,1.2rem);color:var(--ink-2);max-width:40ch;margin-top:-12px;text-wrap:balance}

/* form: no card, fields sit on the paper */
form h2{font:700 1.35rem/1.3 var(--display)}
.with{font-size:.92rem;color:var(--ink-2);margin:2px 0 16px}
.fields{display:grid;grid-template-columns:1fr 1fr;gap:14px 16px}
.field{display:grid;gap:6px;align-content:start}
.field label{font-weight:500;font-size:.92rem}
.field input{font:inherit;width:100%;height:54px;padding:0 14px;border:1.5px solid var(--rule);border-radius:10px;background:var(--sheet);color:var(--ink);transition:border-color .2s var(--ease),box-shadow .2s var(--ease)}
html[dir="rtl"] .field input{text-align:right}
.field input:hover{border-color:oklch(76% 0.012 170)}
.field input:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px oklch(51% 0.08 168 / .18)}
.field input[aria-invalid="true"]{border-color:var(--err)}
.field .err:empty{display:none}
.field .err{font-size:.82rem;line-height:1.3;color:var(--err)}
/* time slots: native radios under tile labels */
.slots{grid-column:1/-1;border:0;margin:0;padding:0;min-width:0}
.slots legend{font-weight:500;font-size:.92rem;padding:0;margin-bottom:6px}
.slot-grid{display:grid;grid-template-columns:repeat(9,1fr);gap:8px}
.slot-grid label{position:relative}
.slot-grid input{position:absolute;inset:0;margin:0;opacity:0;cursor:pointer}
.slot-grid span{display:grid;place-items:center;height:48px;border:1.5px solid var(--rule);border-radius:10px;background:var(--sheet);font-weight:500;font-size:.9rem;white-space:nowrap;transition:border-color .2s var(--ease),background .2s var(--ease),color .2s var(--ease)}
.slot-grid input:hover + span{border-color:oklch(76% 0.012 170)}
.slot-grid input:focus-visible + span{border-color:var(--green);box-shadow:0 0 0 3px oklch(51% 0.08 168 / .18)}
.slot-grid input:checked + span{background:var(--green);border-color:var(--green);color:var(--sheet)}
.slot-grid input:disabled{cursor:not-allowed}
.slot-grid input:disabled + span{opacity:.4;text-decoration:line-through}
.slots[aria-invalid="true"] .slot-grid span{border-color:var(--err)}
.slots .err{display:block;margin-top:6px}
.slots .err:empty{display:none}
.hp{display:none}
form button{margin-top:10px;width:100%;height:58px;border:0;border-radius:10px;cursor:pointer;font:600 1.1rem/1 var(--body);background:var(--green);color:var(--sheet);transition:background .2s var(--ease)}
form button:hover{background:var(--green-deep)}
form button:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
form button:disabled{opacity:.6;cursor:progress}
.status{min-height:1.5em;margin-top:10px;font-weight:500;color:var(--err)}

.done{padding:28px 0}
.done h2{font:900 clamp(1.8rem,3vw,2.4rem)/1.2 var(--display);color:var(--green);margin-bottom:8px}
.done p{color:var(--ink-2);max-width:42ch}

/* hero banner (generated artwork, 3:4). Desktop keeps the box at 3:4 so nothing is cropped;
   the square crop below 1100px stays inside the artwork's safe zone (10%-78% height).
   Edges fade into the page in CSS, so the fade follows whatever crop is on screen. */
.banner{grid-column:2;grid-row:1;align-self:start;position:relative;margin:0;aspect-ratio:3/4;
  --fade-x:linear-gradient(to right,transparent,#000 6%);
  --fade-y:linear-gradient(transparent,#000 4%,#000 90%,transparent)}
html[dir="rtl"] .banner{--fade-x:linear-gradient(to left,transparent,#000 6%)}
.banner img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%;
  -webkit-mask-image:var(--fade-x),var(--fade-y);-webkit-mask-composite:source-in;
          mask-image:var(--fade-x),var(--fade-y);mask-composite:intersect}
.copy{grid-column:1;grid-row:1}

/* the offer, itemised like a restaurant ticket */
.ticket{position:absolute;z-index:2;bottom:40px;inset-inline-start:calc(55% - 48px);width:340px;filter:drop-shadow(0 18px 28px oklch(25% 0.02 170 / .22))}
.ticket-body{background:var(--sheet);padding:22px 22px 30px;
  -webkit-mask:linear-gradient(#000 0 0) top/100% calc(100% - 8px) no-repeat,conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) bottom/16px 8px repeat-x;
          mask:linear-gradient(#000 0 0) top/100% calc(100% - 8px) no-repeat,conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) bottom/16px 8px repeat-x}
.ticket-logo{height:16px;width:auto;margin-bottom:14px}
.ticket h2{font:700 1.15rem/1.35 var(--display);margin-bottom:12px}
.ticket ul{list-style:none;border-block:1.5px dashed var(--rule);padding-block:6px;font-size:.9rem}
.ticket li{padding-block:6px}
.ticket li + li{border-top:1px dotted var(--rule)}
.total{display:flex;justify-content:space-between;align-items:baseline;padding-top:12px;font-weight:600}
.total b{font:900 2.6rem/1 var(--display);font-variant-numeric:tabular-nums}
.total b small{font:600 1rem var(--body);margin-inline-start:6px}


footer{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:22px var(--gutter);border-top:1px solid var(--rule);font-size:.88rem;color:var(--ink-2)}
footer img{height:18px;width:auto}
footer a{color:inherit}

/* keep the form clear of the ticket that straddles into this column */
@media (min-width:1101px){.copy{padding-inline-end:calc(var(--gutter) + 56px)}}

/* phones and narrow tablets: copy, ticket, form, then Aadil */
@media (max-width:1100px){
  .page{grid-template-columns:1fr;min-height:0}
  .copy{max-width:680px;padding-bottom:40px}
  .banner,.copy{grid-column:auto;grid-row:auto}
  .banner{width:min(100%,560px);aspect-ratio:1;margin-inline:auto}
  .banner,html[dir="rtl"] .banner{--fade-x:linear-gradient(to right,transparent,#000 5%,#000 95%,transparent);--fade-y:linear-gradient(transparent,#000 2%,#000 88%,transparent)}
  .ticket{position:relative;inset:auto;width:100%;max-width:420px}
}
@media (max-width:560px){
  header{height:56px}
  header img{height:22px}
  .fields{grid-template-columns:1fr}
  .slot-grid{grid-template-columns:repeat(3,1fr)}
  .ticket-body{padding:18px 18px 26px}
  .ticket ul{font-size:.86rem}
  .ticket li{padding-block:4px}
  .copy{gap:24px}
}
@media (prefers-reduced-motion:reduce){
  .field input,form button,.slot-grid span{transition:none}
}
.done:focus{outline:none}