/* built by scratchpad/design-2026/build-gift-opening.py: the gift's page, every gift as a letter (gl-); never edit by
   hand. Every at-rule is kept. */

/* ---- EVERY GIFT AS A LETTER (gl-; Jack, 21 October 2026, built from /design-2026/gift-envelope-2/ and -3/, his
   choices A1 B3 C1 D1 S2 P2; a digital gift first, then the printed one with the magazine's own films). The page is one screen of film: the sea off Staffa while it waits, the envelope in the middle
   with "Something has arrived for you, {name}." above it. Opened, the ink stamp lifts, the flap swings up showing its
   inside, the letter rises out in front of it and the envelope drops away as the letter comes forward to the middle,
   where the film changes to Scotland and cut card falls from it. The letter is A5 upright on laid paper: our mark, YOU HAVE
   BEEN GIFTED, the subscription, what it is, their note in Caveat, FROM {NAME} at its foot. Set up subscription lifts it
   away and the questions come one at a time, white on the film, each line rising in turn. Only transform and opacity
   move; every piece of paper is solid with its own grain; the shadow is a still layer of its own. Every colour is one of
   the eight or a mix of them (kraft: paper, gold and charcoal; the letter: paper and a touch of gold). */
.gl{--k:#CDBB9C;--k-d:#BCA987;--k-l:#D6C6A8;--k-in:#B9A584;
  --grain:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .55  0 0 0 0 .5  0 0 0 0 .44  0 0 0 .5 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  --fine:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .62  0 0 0 0 .58  0 0 0 0 .52  0 0 0 .22 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  --fibre:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='f'><feTurbulence type='fractalNoise' baseFrequency='.03 .32' numOctaves='2' seed='4' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .55  0 0 0 0 .48  0 0 0 0 .4  0 0 0 .3 0'/></filter><rect width='100%' height='100%' filter='url(%23f)'/></svg>");
  position:relative;height:100vh;height:100svh;min-height:560px;overflow:hidden;background:#141210;color:#fff;
  display:flex;flex-direction:column;align-items:center;justify-content:center;padding:96px 20px 64px;text-align:center}
.gl-film{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity 1.6s ease}
.gl-land{opacity:0}
.gl-out .gl-land{opacity:1}
.gl-out .gl-water{opacity:0}
.gl-veil{position:absolute;inset:0;background:rgba(14,12,10,.4);transition:background .9s ease}
/* behind the questions a little deeper: the magazine's pages are bright under white words */
.gl-setup .gl-veil{background:rgba(14,12,10,.52)}
.gl-mk{position:absolute;top:30px;left:50%;z-index:9;width:84px;height:34px;transform:translateX(-50%);background:#fff;
  -webkit-mask:url(/design-2026/02.png) center/contain no-repeat;mask:url(/design-2026/02.png) center/contain no-repeat}
.gl-mk:focus-visible{outline:2px solid #fff;outline-offset:6px}
.gl-ask{position:relative;font:400 min(clamp(30px,3vw,46px), 28px + (clamp(30px,3vw,46px) - 28px) * 0.6)/1.08 var(--face);margin:0 0 clamp(30px,5vh,48px);max-width:16ch;text-wrap:balance;letter-spacing:-.01em;transition:opacity .4s ease,transform .5s ease}
.gl-line{position:relative;font:italic 400 18px/1.5 var(--serif);margin:-14px 0 28px;opacity:.92}
.gl-go{position:relative;font:600 12px/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;padding:18px 36px;background:#fff;color:#414042;border:1px solid #fff;cursor:pointer;border-radius:0;text-decoration:none;transition:opacity .35s ease,background .2s,color .2s}
.gl-go:hover{background:transparent;color:#fff}
.gl-go:focus-visible,.gl-ev:focus-visible{outline:2px solid #fff;outline-offset:6px}
.gl-go[disabled]{opacity:.6;cursor:default}
.gl-first{margin-top:clamp(34px,5vh,52px)}
/* the email first, for a gift made for one email: a white box and the white button under the envelope */
.gl-key{position:relative;display:flex;flex-direction:column;align-items:center;gap:12px;width:min(440px,84vw);margin-top:clamp(28px,4vh,44px)}
.gl-key input{width:100%;height:54px;padding:0 18px;border:0;background:#FFFFF7;color:#414042;font:400 17px var(--serif);text-align:center;border-radius:0}
.gl-key input:focus{outline:2px solid #fff;outline-offset:3px}
.gl-err{margin:2px 0 0;font:400 16px/1.45 var(--serif);color:#fff}
.gl-preview{position:relative;max-width:34ch;margin:0;font:italic 400 17px/1.5 var(--serif)}

/* the envelope: 440 wide, never more than 84% of the screen; its seal on the exact centre */
.gl-wrap{position:relative}
.gl-ev{position:relative;width:min(440px,84vw);aspect-ratio:1.414;border:0;padding:0;background:none;cursor:pointer;display:block}
.gl-ev .gl-p{position:absolute;inset:0;display:block;background-blend-mode:multiply,multiply,normal;background-size:300px 300px,220px 220px,auto}
.gl-shadow{position:absolute;left:4%;right:4%;bottom:-3%;height:30%;background:radial-gradient(50% 50% at 50% 50%,rgba(0,0,0,.45),rgba(0,0,0,0) 70%);filter:blur(10px);z-index:0}
.gl-back{background:var(--fibre),var(--grain),var(--k);z-index:1;box-shadow:0 1px 1px rgba(0,0,0,.2)}
.gl-l{background:var(--fibre),var(--grain),var(--k-d);clip-path:polygon(0 0,51% 54%,0 100%);z-index:3}
.gl-r{background:var(--fibre),var(--grain),var(--k-d);clip-path:polygon(100% 0,49% 54%,100% 100%);z-index:3}
.gl-b{background:var(--fibre),var(--grain),var(--k);clip-path:polygon(0 100%,50% 46%,100% 100%);z-index:3}
.gl-ev .gl-bl{clip-path:polygon(0 100%,50% 46%,100% 100%,100% 98.6%,50% 44%,0 98.6%);background:rgba(60,45,28,.16);z-index:3}
.gl-flap{position:absolute;left:0;right:0;top:0;height:50%;transform-origin:50% 0;transform-style:preserve-3d;z-index:5}
.gl-flap i{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;clip-path:polygon(0 0,100% 0,50% 100%);background-blend-mode:multiply,multiply,normal;background-size:300px 300px,220px 220px,auto}
.gl-flap .gl-front{background:var(--fibre),var(--grain),var(--k-l)}
.gl-flap .gl-front::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,250,235,.10),rgba(60,45,28,.10))}
.gl-flap .gl-inside{transform:rotateX(180deg);background:var(--fibre),var(--grain),var(--k-in)}
.gl-fs{position:absolute;left:0;right:0;top:0;height:50%;clip-path:polygon(0 0,100% 0,50% 100%);background:rgba(45,32,18,.28);transform:translateY(2px);filter:blur(1.5px);z-index:4}
.gl-seal{position:absolute;left:50%;top:50%;width:19%;aspect-ratio:1;transform:translate(-50%,-50%) rotate(-10deg);z-index:6;mix-blend-mode:multiply;pointer-events:none}
.gl-seal svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.gl-ring{fill:none;stroke:#682114;stroke-width:2.4;filter:url(#gl-rough)}
.gl-ring2{fill:none;stroke:#682114;stroke-width:1;filter:url(#gl-rough)}
.gl-seal text{fill:#682114;font:600 8.6px var(--sans);letter-spacing:.24em;filter:url(#gl-rough)}
.gl-sm{position:absolute;left:50%;top:50%;width:52%;height:22%;transform:translate(-50%,-50%);background:#682114;opacity:.92;-webkit-mask:url(/design-2026/02.png) center/contain no-repeat;mask:url(/design-2026/02.png) center/contain no-repeat}

/* the letter: A5 upright, laid paper; hidden until the flap lifts, so nothing shows at the seams */
.gl-note{position:absolute;left:50%;top:50%;z-index:2;width:min(440px,88vw,calc((100svh - 230px) / 1.414));aspect-ratio:1/1.414;opacity:0;pointer-events:none;
  transform:translate(-50%,calc(-50% + var(--dy0,0px))) scale(var(--s0,.8));clip-path:inset(0 0 var(--c0,0px) 0)}
.gl-side{position:absolute;inset:0;color:#414042;text-align:center;padding:11% 10% 9%;display:flex;flex-direction:column;align-items:center;
  background:radial-gradient(130% 70% at 30% 0%,rgba(255,255,255,.5),rgba(255,255,255,0) 62%),
    repeating-linear-gradient(0deg,rgba(120,100,70,.035) 0 1px,transparent 1px 3px),repeating-linear-gradient(90deg,rgba(120,100,70,.035) 0 1px,transparent 1px 28px),var(--fine),#F7F2E6;
  background-blend-mode:normal,multiply,multiply,multiply,normal;background-size:auto,auto,auto,180px 180px,auto;
  box-shadow:inset 0 0 0 1px rgba(110,90,60,.09),0 1px 1px rgba(0,0,0,.14),0 26px 54px rgba(0,0,0,.34)}
.gl-mk2{display:block;width:72px;height:29px;margin-bottom:9%;background:#682114;-webkit-mask:url(/design-2026/02.png) center/contain no-repeat;mask:url(/design-2026/02.png) center/contain no-repeat}
.gl-kick{font:600 10.5px/1 var(--sans);letter-spacing:.28em;text-transform:uppercase;color:#682114;margin:0 0 14px}
.gl-side .gl-h{font:400 min(clamp(24px,2.1vw,30px), 28px + (clamp(24px,2.1vw,30px) - 28px) * 0.6)/1.12 var(--face);margin:0 0 14px;text-wrap:balance;max-width:15ch;color:#414042}
.gl-what{font:400 15px/1.62 var(--serif);margin:0;color:rgba(65,64,66,.9);max-width:31ch;text-wrap:pretty}
/* their words in the middle of the space below ours, in Caveat; who it is from at the foot, in our type */
.gl-theirs{flex:1;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:6% 0 2%}
.gl-msg{font:500 29px/1.18 Caveat,cursive;color:#2F2D30;margin:0;max-width:22ch;text-wrap:balance;overflow-wrap:anywhere}
.gl-by{margin:0;font:600 10.5px/1.4 var(--sans);letter-spacing:.28em;text-transform:uppercase;color:#682114}
.gl-then{position:absolute;left:50%;top:calc(100% + 24px);transform:translateX(-50%);margin:0;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .5s ease}

/* the questions, on the film: one at a time in the middle of the screen, each line rising in turn */
.gl-steps{position:absolute;inset:0;z-index:8;pointer-events:none;--d:.3s}
.gl-steps.gl-firstq{--d:.95s}
.gl-setup .gl-steps{pointer-events:auto}
.gl-q{position:absolute;left:50%;top:50%;width:min(520px,88vw);transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;visibility:hidden;transition:visibility 0s .4s;color:#fff}
.gl-setup .gl-q.on{visibility:visible;transition:visibility 0s}
.gl-q > *{opacity:0;transform:translateY(14px);transition:opacity .3s ease,transform .3s ease}
.gl-setup .gl-q.on > *{opacity:1;transform:none;transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d)}
.gl-setup .gl-q.on > :nth-child(2){transition-delay:calc(var(--d) + .12s)}
.gl-setup .gl-q.on > :nth-child(3){transition-delay:calc(var(--d) + .24s)}
.gl-setup .gl-q.on > :nth-child(4){transition-delay:calc(var(--d) + .36s)}
.gl-setup .gl-q.on > :nth-child(5){transition-delay:calc(var(--d) + .48s)}
.gl-q .gl-h{font:400 min(clamp(32px,3.4vw,52px), 28px + (clamp(32px,3.4vw,52px) - 28px) * 0.6)/1.08 var(--face);margin:0 0 22px;text-wrap:balance;letter-spacing:-.01em}
.gl-f{width:min(440px,100%);margin:0 0 18px}
.gl-q input:not([type=checkbox]){width:100%;height:56px;padding:0 18px;border:0;background:#FFFFF7;color:#414042;font:400 18px var(--serif);text-align:center;border-radius:0}
.gl-q input::placeholder{color:rgba(65,64,66,.5)}
.gl-q input:focus{outline:2px solid #fff;outline-offset:3px}
.gl-start{font:600 12px/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;padding:19px 44px;background:#fff;color:#414042;border:1px solid #fff;cursor:pointer;border-radius:0;transition:background .2s,color .2s}
.gl-start:hover{background:transparent;color:#fff}
.gl-start[disabled]{opacity:.6;cursor:default}
.gl-backto{margin-top:18px;background:none;border:0;font:italic 400 16px/1.3 var(--serif);color:rgba(255,255,255,.88);text-decoration:underline;text-underline-offset:4px;cursor:pointer}
.gl-vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.gl-rows{width:min(440px,100%);display:flex;flex-direction:column;gap:10px;margin:0 0 22px;text-align:left}
.gl-row{display:flex;gap:14px;align-items:center;padding:14px 18px;background:#FFFFF7;color:#414042;cursor:pointer}
.gl-row input{width:20px;height:20px;accent-color:#682114;flex:none}
.gl-row b{display:block;font:400 19px/1.2 var(--face)}
.gl-row i{display:block;font:italic 400 14px/1.3 var(--serif);color:rgba(65,64,66,.75)}
/* a printed gift's address: the boxes stacked, close, the country a white select like them */
.gl-addr{width:min(440px,100%);display:flex;flex-direction:column;gap:8px;margin:0 0 18px}
.gl-addr label{display:block}
.gl-q .gl-addr input:not([type=checkbox]){height:52px;font-size:17px}
.gl-addr select{width:100%;height:52px;padding:0 18px;border:0;border-radius:0;background:#FFFFF7;color:#414042;font:400 17px var(--serif);text-align:center;text-align-last:center;appearance:none;-webkit-appearance:none}
.gl-addr select:focus{outline:2px solid #fff;outline-offset:3px}
/* the search for it (Jack: "make easier to addd address and for internationsal"): one white box, what it finds in a white
   list under it, each a row to press; picked, the lines appear filled in to correct */
.gl-search{position:relative}
.gl-q .gl-search input{height:56px;font-size:18px}
.gl-search input::-webkit-search-cancel-button{-webkit-appearance:none;display:none}
.gl-found{list-style:none;margin:6px 0 0;padding:0;background:#FFFFF7;text-align:left;box-shadow:0 18px 40px rgba(0,0,0,.35)}
.gl-found li + li{box-shadow:inset 0 1px 0 rgba(65,64,66,.08)}
.gl-found button{display:block;width:100%;padding:13px 18px;background:none;border:0;color:#414042;font:400 16px/1.4 var(--serif);text-align:left;cursor:pointer}
.gl-found button:hover,.gl-found button:focus-visible{background:#F4EEE3;outline:none}

/* creating the subscription: the envelope's stamp drawing itself in white, the two rings turning against each other,
   our mark breathing in the middle (Jack: "Creatings your subscription and a cool loading animation") */
.gl-making{position:relative;display:block;width:112px;height:112px;margin-top:6px}
.gl-making svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.gl-mring,.gl-mring2{fill:none;stroke:#fff;transform-origin:50px 50px;stroke-linecap:round}
.gl-mring{stroke-width:1.6;stroke-dasharray:289;stroke-dashoffset:289;animation:gl-draw 2.4s cubic-bezier(.6,0,.3,1) infinite,gl-turn 7s linear infinite}
.gl-mring2{stroke-width:1;stroke-dasharray:170;stroke-dashoffset:170;opacity:.75;animation:gl-draw2 2.4s cubic-bezier(.6,0,.3,1) .3s infinite,gl-turn 9s linear infinite reverse}
@keyframes gl-draw{0%{stroke-dashoffset:289}50%{stroke-dashoffset:0}100%{stroke-dashoffset:-289}}
@keyframes gl-draw2{0%{stroke-dashoffset:170}50%{stroke-dashoffset:0}100%{stroke-dashoffset:-170}}
@keyframes gl-turn{to{transform:rotate(360deg)}}
.gl-mmark{position:absolute;left:50%;top:50%;width:46%;height:20%;transform:translate(-50%,-50%);background:#fff;animation:gl-breathe 2.4s ease-in-out infinite;
  -webkit-mask:url(/design-2026/02.png) center/contain no-repeat;mask:url(/design-2026/02.png) center/contain no-repeat}
@keyframes gl-breathe{0%,100%{opacity:.55}50%{opacity:1}}
.gl-confetti{position:absolute;inset:0;z-index:7;width:100%;height:100%;pointer-events:none}

/* opening: transform and opacity only, one after another */
.gl-open .gl-ask,.gl-open .gl-first,.gl-open .gl-key,.gl-open .gl-line{opacity:0;pointer-events:none}
.gl-open .gl-ask{transform:translateY(-10px)}
.gl-open .gl-seal{animation:gl-seal .35s cubic-bezier(.4,0,1,1) forwards}
@keyframes gl-seal{to{opacity:0;transform:translate(-50%,-62%) rotate(-10deg) scale(.92)}}
.gl-open .gl-fs{animation:gl-fade .25s ease .2s forwards}
@keyframes gl-fade{to{opacity:0}}
/* the flap turns up over its hinge; past the half it is behind the letter (z-index steps, it does not tween) */
.gl-open .gl-flap{animation:gl-flap .75s cubic-bezier(.45,0,.2,1) .2s forwards,gl-fade .6s cubic-bezier(.5,0,.75,0) 1.75s forwards}
@keyframes gl-flap{0%{transform:perspective(1100px) rotateX(0);z-index:5}100%{transform:perspective(1100px) rotateX(180deg);z-index:0}}
/* the letter rises out of the pocket in front of the open flap (its foot hidden below the envelope), then comes forward */
.gl-open .gl-note{animation:gl-show .01s linear .42s forwards,gl-note 1.75s cubic-bezier(.33,0,.2,1) .85s forwards}
@keyframes gl-show{to{opacity:1}}
@keyframes gl-note{
  0%{transform:translate(-50%,calc(-50% + var(--dy0))) scale(var(--s0));clip-path:inset(0 0 var(--c0) 0);z-index:2}
  45%{transform:translate(-50%,calc(-50% + var(--dy1))) scale(var(--s0));clip-path:inset(0 0 var(--c1) 0);z-index:2}
  46%{z-index:7}
  100%{transform:translate(-50%,calc(-50% + var(--dyf))) scale(1);clip-path:inset(-60px -60px -140px -60px);z-index:7}}
/* the envelope drops away under it */
.gl-open .gl-back,.gl-open .gl-l,.gl-open .gl-r,.gl-open .gl-b,.gl-open .gl-ev .gl-bl,.gl-open .gl-shadow{animation:gl-away .7s cubic-bezier(.5,0,.75,0) 1.75s forwards}
@keyframes gl-away{to{opacity:0;transform:translateY(60px)}}
.gl-opened .gl-note{pointer-events:auto}
.gl-opened .gl-then{opacity:1;pointer-events:auto}
.gl-opened .gl-ev{pointer-events:none}
/* set up: the letter lifts away slowly, the questions build once it has gone */
.gl-setup .gl-note{animation:gl-lift .9s cubic-bezier(.4,0,.2,1) forwards;pointer-events:none}
@keyframes gl-lift{from{transform:translate(-50%,calc(-50% + var(--dyf))) scale(1);opacity:1;clip-path:none;z-index:7}to{transform:translate(-50%,calc(-50% + var(--dyf) - 26px)) scale(.98);opacity:0;clip-path:none;z-index:7}}
.gl-setup .gl-then{opacity:0;pointer-events:none;transition:opacity .25s ease}
/* sent back with something to put right: straight to the questions, the letter already read */
.gl-back-to-q .gl-ev,.gl-back-to-q .gl-ask{display:none}
@media (max-width:760px){
  .gl{padding:80px 16px 48px}
}
@media (prefers-reduced-motion:reduce){
  .gl-film{transition:none}
  .gl-open .gl-seal,.gl-open .gl-fs,.gl-open .gl-flap,.gl-open .gl-note,.gl-open .gl-back,.gl-open .gl-l,.gl-open .gl-r,.gl-open .gl-b,.gl-open .gl-ev .gl-bl,.gl-open .gl-shadow,.gl-setup .gl-note{animation-duration:.01s;animation-delay:0s}
  .gl-q > *,.gl-setup .gl-q.on > *{transition:none}
  .gl-mring,.gl-mring2{animation:none;stroke-dashoffset:0}
  .gl-mmark{animation:none}
}