/* ------------------------------------------------------------------
   About. Drawn on the same 1440 grid as the case pages. One pinned
   section in the middle: the studio comes down to the laptop and the
   page's own text ends up on its screen, with the caption row under
   the frame changing as it goes.
   ------------------------------------------------------------------ */
.wine{background:var(--wine)}
.inkbg{background:var(--ink)}
.fk{font-size:14px;font-weight:400;letter-spacing:.18em;line-height:14px;text-transform:uppercase;color:var(--mute)}
.num{position:absolute;height:21px;min-width:35px;padding:2px 10px;background:var(--green);color:#CDE3E8;
  font-size:14px;font-weight:500;font-style:italic;letter-spacing:.06em;line-height:17px;white-space:nowrap}

/* ---------- the five ---------- */
.frow{position:absolute;left:0;width:1440px;height:200px}
.frow .num{left:60px;top:6px}
.frow .fn{position:absolute;left:150px;top:0;width:340px;font-size:24px;font-weight:500;letter-spacing:-.02em;
  line-height:32px;text-transform:uppercase}
.frow .fd{position:absolute;left:530px;top:0;width:450px;font-size:15px;line-height:22px;letter-spacing:-.01em;opacity:.68}
.frow .fth{position:absolute;left:1060px;top:0;width:320px;height:200px;overflow:hidden;background:var(--plate)}
.frow .fth img{transition:transform 1.1s var(--e)}
.frow:hover .fth img{transform:scale(1.04)}

/* ---------- write to me ---------- */
.bigmail{font-size:32px;font-weight:500;letter-spacing:-.02em;line-height:40px;color:#CDE3E8;white-space:nowrap}
.soc2{position:absolute;display:flex;gap:34px}
.soc2 a{font-size:14px;line-height:18px;letter-spacing:-.01em;color:#CDE3E8;transition:opacity .2s var(--e)}
.soc2 a:hover{opacity:.6}
.foot.lt a{color:#CDE3E8}
.foot.lt a:hover{background:var(--cream);color:var(--ink)}

/* ---------- the room ---------- */
.srun{position:relative;width:100%}
.spin{position:sticky;top:0;height:var(--svp,900px);overflow:hidden;display:flex;align-items:center;justify-content:center}
.sblk{position:absolute;inset:0}
.sview{position:absolute;inset:0;overflow:hidden}
.sstage{position:absolute;inset:0;opacity:0;transition:opacity 1s var(--e)}
.sstage.live{opacity:1}
.sstage canvas{display:block;width:100%;height:100%}
.sload{position:absolute;left:0;right:0;top:48%;text-align:center;
  font-size:12px;letter-spacing:.18em;text-transform:uppercase;font-weight:500;color:var(--mute)}
.sstage.live + .sload{opacity:0}

/* the one thing on the page that blinks */
.sblink{position:absolute;border:1px solid var(--wine);opacity:0;pointer-events:none;transition:opacity .35s var(--e)}
.sblink.on{animation:sblink 1.5s var(--e) infinite}
@keyframes sblink{0%,100%{opacity:0}18%{opacity:1}42%{opacity:.25}60%{opacity:1}}

/* the caption row under the frame, as it is laid out in Figma */
.scrule{position:absolute;left:60px;top:744px;width:1320px;height:1px;background:var(--ink);opacity:.14}
.scap{position:absolute;left:0;top:756px;width:1440px;height:44px}
.st{position:absolute;left:0;top:0;width:1440px;height:44px;opacity:0;transform:translateY(8px);
  transition:opacity .22s var(--e),transform .5s var(--e)}
.st.on{opacity:1;transform:none;transition:opacity .45s var(--e) .1s,transform .6s var(--e) .08s}
.st .n{position:absolute;left:60px;top:4px;font-size:12px;font-weight:400;letter-spacing:.18em;line-height:14px;color:var(--mute)}
.st .tt{position:absolute;left:200px;top:0;width:460px;font-size:17px;font-weight:500;letter-spacing:-.01em;line-height:21px}
.st p{position:absolute;left:700px;top:0;width:680px;font-size:14px;line-height:19px;letter-spacing:-.01em;opacity:.62}

/* the page's own text, sitting on the screen of the model */
.sabout{position:absolute;left:0;top:0;opacity:0;pointer-events:none;z-index:5;display:flex;align-items:stretch;
  transition:opacity .55s var(--e);--s:1}
.sabout.on{opacity:1;pointer-events:auto}
.sabout .in{width:100%;height:100%;display:flex;flex-direction:column;align-items:flex-start;
  padding:calc(44px * var(--s)) calc(38px * var(--s)) calc(24px * var(--s))}
.sabout .schip{display:inline-block;height:calc(18px * var(--s));padding:calc(2px * var(--s)) calc(5px * var(--s)) 0;
  background:var(--wine);color:#CDE3E8;font-size:calc(11px * var(--s));font-weight:500;letter-spacing:.18em;
  line-height:calc(14px * var(--s));text-transform:uppercase}
.sabout h2{font-size:calc(32px * var(--s));line-height:calc(40px * var(--s));letter-spacing:-.02em;font-weight:500;
  margin-top:calc(10px * var(--s));text-transform:uppercase}
.sabout .role{display:block;margin-top:calc(10px * var(--s));font-size:calc(12px * var(--s));line-height:calc(14px * var(--s));
  letter-spacing:.18em;text-transform:uppercase;color:var(--mute)}
.sabout p{font-size:calc(17px * var(--s));line-height:calc(24px * var(--s));letter-spacing:-.01em;
  margin-top:calc(30px * var(--s));max-width:calc(760px * var(--s))}
.sabout p + p{margin-top:calc(30px * var(--s))}
.sabout p.dim{opacity:.72}
.sabout .mail{display:inline-block;margin-top:auto;font-size:calc(17px * var(--s));
  line-height:calc(24px * var(--s));font-weight:500}

/* ---------- the phone ---------- */
.mstate{margin-top:28px}
.mstate .mlab{margin-top:12px;opacity:.6}
.mstate .mh{margin-top:4px}
.mstate .mbody{margin-top:6px;opacity:.68}
.mcard{background:#FFFDEE;padding:20px 18px 22px;color:var(--ink)}
.mfive{padding:20px 0;border-bottom:1px solid rgba(45,18,13,.14)}
.mfive .mh{margin-top:10px}
.mfive .mbody{margin-top:6px}
.mfive .mshot{margin-top:14px}
.mnum{display:inline-block;padding:2px 9px;background:var(--green);color:#CDE3E8;font-size:13px;font-weight:500;
  font-style:italic;letter-spacing:.06em;line-height:17px}

/* the room on a phone: the whole window, and at the end the screen opens
   out to the window with the text at a size a phone can read */
@media (max-width:979px){
  .mabout3d .mpin-in{background:var(--bone)}
  .mabout3d .sview{position:absolute;inset:0}
  .mabout3d .sabout{left:0;top:0;width:100%;height:100%;opacity:1;visibility:hidden;background:#FFFDEE;
    pointer-events:auto;transition:none;--s:1;clip-path:inset(50%)}
  .mabout3d .sabout .in{height:100vh;height:100svh;padding:34px 22px 28px;opacity:var(--tx,0)}
  .mabout3d .sabout .schip{font-size:11px}
  .mabout3d .sabout h2{font-size:30px;line-height:34px;margin-top:14px}
  .mabout3d .sabout .role{font-size:11px;line-height:16px;margin-top:8px}
  .mabout3d .sabout p{font-size:14px;line-height:21px;margin-top:18px;max-width:none}
  .mabout3d .sabout p + p{margin-top:14px}
  .mabout3d .sabout .mail{font-size:16px;line-height:22px;margin-top:22px}
}

@media (prefers-reduced-motion:reduce){
  .st,.sstage,.sabout{transition:none}
}

/* palette: coffee bean, lemon chiffon, botticelli. The big dark surfaces are
   coffee bean with botticelli type; the small tags are botticelli with dark type */
.chip--num,.num,.row .nm,.mnote .n,.mrow .n,.mnum,.wnum{background:#CDE3E8 !important;color:#2D120D !important}
.flag.base i,.flag.base b,.flag.base::after{background:#CDE3E8 !important;color:#2D120D !important}
.chip.wine,.mchip[style*="var(--wine)"]{background:#CDE3E8 !important;color:#2D120D !important}
.s-hero .cta{background:#CDE3E8 !important;color:#2D120D !important}
.s-hero .cta:hover{background:#FFFAD8 !important;color:#2D120D !important}
.mhero .mcta{background:#CDE3E8 !important;color:#2D120D !important}
#pagebar.onwine nav a:hover{background:#CDE3E8 !important;color:#2D120D !important}
#pagebar.onwine nav .mail:hover{background:#FFFAD8 !important;color:#2D120D !important}