/* Header: theme switch on the left, languages on the right. */
header{
  position:absolute;top:0;left:0;right:0;z-index:40;
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;padding:calc(24px + env(safe-area-inset-top,0px)) clamp(18px,4vw,46px) 0;
}

.langs{display:flex;gap:1px}
.langs button{
  background:none;border:none;cursor:pointer;
  font-family:"PT Mono",monospace;font-size:11px;letter-spacing:.1em;
  color:var(--pencil);padding:5px;transition:color .2s ease;
}
.langs button[aria-pressed="true"]{color:var(--accent)}
.theme{
  background:none;border:none;cursor:pointer;padding:0;
  width:32px;height:32px;display:grid;place-items:center;color:var(--pencil);
  transition:color .25s ease,transform .5s ease;
}
.theme:hover{color:var(--accent);transform:rotate(16deg)}
.theme svg{width:20px;height:20px}
.theme .moon{display:none}
[data-theme="dark"] .theme .sun{display:none}
[data-theme="dark"] .theme .moon{display:block}

/* Physical objects lying on the paper: photo prints and sticky notes. */
/* A print lying on the paper. It is a link: the whole card is the target. */
.polaroid{
  --lift:8px;
  display:block;text-decoration:none;color:inherit;
  background:#FBF7EE;padding:9px 9px 32px;
  width:min(210px,52vw);
  transform:rotate(-1.6deg);
  transition:transform .35s cubic-bezier(.34,1.3,.5,1), box-shadow .35s ease;
  box-shadow:
    calc(var(--lift) * .5) calc(var(--lift) * .8) calc(var(--lift) * .6) rgba(90,70,48,.26),
    calc(var(--lift) * 1.6) calc(var(--lift) * 2.4) calc(var(--lift) * 3) rgba(90,70,48,.16);
}
.polaroid:nth-of-type(2){transform:rotate(1.4deg)}

/* A print does not change colour when the light does: the frame stays paper
   white in both themes. Only the shadow follows the surface it lies on. */
[data-theme="dark"] .polaroid{
  box-shadow:
    calc(var(--lift) * .5) calc(var(--lift) * .8) calc(var(--lift) * .6) rgba(0,0,0,.6),
    calc(var(--lift) * 1.6) calc(var(--lift) * 2.4) calc(var(--lift) * 3) rgba(0,0,0,.42);
}

.polaroid:hover,
.polaroid:focus-visible{
  --lift:13px;
  transform:rotate(-1deg) translateY(-4px) scale(1.02);
}
.polaroid:nth-of-type(2):hover,
.polaroid:nth-of-type(2):focus-visible{transform:rotate(.9deg) translateY(-4px) scale(1.02)}
.polaroid:focus-visible{outline:2px solid var(--accent);outline-offset:5px}

.polaroid .shot{
  display:block;aspect-ratio:16/10;
  background:var(--paper-2);
  position:relative;overflow:hidden;
}
.polaroid .shot img{
  display:block;width:100%;height:100%;
  object-fit:cover;
}
.polaroid .cap{
  display:block;
  font-family:"Caveat",cursive;font-size:19px;color:#5A4F44;
  text-align:center;margin-top:12px;
}

.sticker-wrap{
  --curl:24px;position:relative;width:fit-content;max-width:min(300px,100%);
  transform:rotate(-2deg);
  filter:drop-shadow(2px 3px 2px rgba(90,70,48,.3)) drop-shadow(7px 10px 9px rgba(90,70,48,.16));
}
.sticker{
  position:relative;padding:16px 14px 20px;
  background:#E7D8B8;color:#4A4035;
  clip-path:polygon(0 0,100% 0,100% calc(100% - var(--curl)),calc(100% - var(--curl)) 100%,0 100%);
}
.curl{
  position:absolute;right:0;bottom:0;width:var(--curl);height:var(--curl);
  clip-path:polygon(100% 0,100% 100%,0 100%);
  background:linear-gradient(315deg,#F4E9D2 0%,#DCCBA8 52%,#BFAC86 100%);
  box-shadow:-2px -2px 5px rgba(0,0,0,.2);
}
.sticker .hand{font-size:17px;white-space:nowrap}
.sticker .hand + .hand{margin-top:2px}

/* Page layouts and buttons. */
.two{
  display:grid;
  grid-template-columns:minmax(200px,.8fr) 1.4fr;
  gap:clamp(26px,5vw,64px);align-items:start;
}
.two > *{min-width:0}
.side-note{margin-top:26px}

/* Narrow: stacked. Once there is room: a row with the button on the right. */
.works-row{display:block;width:100%;position:relative;z-index:4}
.works-row > .polaroid,
.works-row > .sticker-wrap{display:block}
.works-cta{margin-top:24px;position:relative;z-index:4}
.works-row > .polaroid + .polaroid{margin-top:24px}

/* Slightly tighter on phones so the row always fits. */

a.btn{cursor:pointer}

.btn{
  position:relative;
  display:inline-block;text-decoration:none;   /* .btn is used on <a> too */
  font-family:"PT Mono",monospace;font-size:14px;
  padding:13px 27px;border-radius:999px;cursor:pointer;
  z-index:5;
  color:#FBF6EE;
  background:rgba(var(--accent-rgb),.88);
  border:1px solid rgba(255,255,255,.26);
  /* no backdrop-filter: inside ancestors that use mix-blend-mode and
     isolation it breaks hit-testing in Chromium — the button stops taking
     clicks and the cursor never changes over it */
  transition:transform .25s ease, box-shadow .25s ease, background .25s ease;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.34),
    0 5px 13px rgba(90,70,48,.16);
}
.btn.ghost{
  color:var(--ink);
  background:rgba(255,255,255,.52);
  border-color:rgba(var(--ink-rgb),.2);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.62),
    0 5px 13px rgba(90,70,48,.13);
}
[data-theme="dark"] .btn{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    0 5px 14px rgba(0,0,0,.34);
}
[data-theme="dark"] .btn.ghost{
  background:rgba(255,255,255,.1);
  border-color:rgba(var(--ink-rgb),.18);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    0 5px 14px rgba(0,0,0,.3);
}
.btn:hover{
  transform:translateY(-1.5px);
  background:rgba(var(--accent-rgb),1);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.4),
    0 9px 20px rgba(90,70,48,.2);
}
.btn.ghost:hover{background:rgba(255,255,255,.66)}
[data-theme="dark"] .btn.ghost:hover{background:rgba(255,255,255,.12)}
.btn:active{transform:translateY(.5px)}
.btn:focus-visible{outline:1.5px solid var(--accent);outline-offset:4px}
.btns{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px;position:relative;z-index:4}
.btns-centred{justify-content:center}

/* ─── text as dust ────────────────────────────────────── */
/* Dust does not travel: the old text loses focus and falls apart on the spot,
   the new one gathers in the same place. Movement would read as sliding. */
.word{white-space:nowrap}
/* The real text fades up under the last of the particles. */
[data-dust].settling{animation:settle .4s ease both}
@keyframes settle{from{opacity:0}to{opacity:1}}
.dust{
  display:inline-block;white-space:pre;
  transition:opacity .72s ease, filter .8s ease,
             transform .8s cubic-bezier(.4,0,.2,1);
  transition-delay:var(--d,0ms);
  will-change:transform,opacity,filter;
}
.scattered .dust{
  opacity:0;
  filter:blur(9px);
  transform:scale(var(--s,1.2));
}
.gathered .dust{opacity:1;filter:blur(0);transform:none}

/* Nothing shows before the script has had a chance to split it. */
html.js [data-dust]{opacity:0}
html.js [data-dust].gathered,
html.js [data-dust].scattered{opacity:1}

/* ─── price counter ───────────────────────────────────── */
/* ─── price counter ───────────────────────────────────── */

/* ─── theme flood ─────────────────────────────────────── */
/* The old state sits still while the new one is revealed through a growing
   circle; without this both would cross-fade and the edge would vanish. */
::view-transition-old(root){animation:none}
::view-transition-new(root){animation:none;mix-blend-mode:normal}
::view-transition-old(root){z-index:0}
::view-transition-new(root){z-index:1}

/* Texture layers are dropped while the theme is being flooded on: snapshotting
   blended full-screen layers is what makes that transition stutter. */
/* The texture stays in the snapshot, so the flood carries the new paper with
   it instead of laying down flat colour and painting the grain on afterwards.
   What is dropped instead is everything that would animate underneath. */
html.switching .dust,
html.switching .pt{transition:none}
html.switching .fox.blink .lid-top,
html.switching .fox.blink .lid-bot{animation:none}

/* Canvas the particle swap draws on. It exists only while a page is turning. */
.particles{
  position:fixed;inset:0;z-index:50;
  pointer-events:none;
}

/* A button in transit between two pages: the box morphs, the labels cross. */
.btn-flight{
  position:fixed;z-index:58;pointer-events:none;
  display:grid;place-items:center;
  overflow:hidden;box-sizing:border-box;
  transition:
    left .9s cubic-bezier(.62,0,.14,1),
    top .9s cubic-bezier(.62,0,.14,1),
    width .9s cubic-bezier(.62,0,.14,1),
    height .9s cubic-bezier(.62,0,.14,1),
    background-color .9s ease,
    color .9s ease,
    border-color .9s ease,
    border-radius .9s ease,
    font-size .9s ease,
    box-shadow .9s ease;
}
/* The faces carry only their text: the box is drawn by the ghost itself. */
.btn-flight .flight-face{
  background:none;border-color:transparent;box-shadow:none;
  white-space:nowrap;pointer-events:none;
  transition:opacity .5s ease;
}
.btn-flight .now{opacity:0}
.btn-flight.arrived .was{opacity:0}
.btn-flight.arrived .now{opacity:1;transition-delay:.3s}