/* libby.com.au — stuck on, never stuck up */
@font-face{font-family:"Bagel Fat One";src:url(fonts/bagel.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Radio Canada Big";src:url(fonts/radio-canada-big.woff2) format("woff2");font-weight:400 700;font-display:swap}
@font-face{font-family:"Google Sans Flex";src:url(fonts/google-sans-flex.woff2) format("woff2");font-weight:1 1000;font-display:swap}

:root{--ink:#121212;--paper:#F1ECE2;--moss:#29594D;--pink:#FF4F8B;--red:#E10A0A;--paper-2:#E6DFD1}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth;overflow-x:clip}
body{font-family:"Google Sans Flex",system-ui,sans-serif;background:var(--paper);color:var(--ink);line-height:1.6;font-size:1.0625rem;-webkit-font-smoothing:antialiased;overflow-x:clip}
img,svg{max-width:100%;display:block}
a{color:inherit}
p+p{margin-top:1em}
:focus-visible{outline:3px solid var(--pink);outline-offset:3px}
.ink :focus-visible,.moss :focus-visible{outline-color:var(--paper)}
.skip{position:absolute;left:1rem;top:-4rem;background:var(--pink);color:var(--ink);padding:.6rem 1rem;border-radius:99px;font-weight:600;z-index:100}
.skip:focus{top:1rem}
h1,h2,h3{font-family:"Radio Canada Big",sans-serif;font-weight:700;letter-spacing:-.03em;line-height:1.05}
h1{font-size:clamp(2.6rem,7vw,5.6rem)}
h2{font-size:clamp(2rem,4.6vw,3.6rem)}
h3{font-size:1.5rem}
.moss{background:var(--moss);color:var(--paper)}
.ink{background:var(--ink);color:var(--paper)}
.pinkbg{background:var(--pink);color:var(--ink)}
.wrap{max-width:1200px;margin:0 auto;padding:0 1.5rem;position:relative}
.sec{padding:clamp(4rem,9vw,7.5rem) 0;position:relative}
.narrow{max-width:46rem}
.lead{font-size:1.25rem;line-height:1.55}

/* nav */
.nav{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.4rem 0;flex-wrap:wrap;position:relative;z-index:6}
.logo{font-family:"Bagel Fat One",sans-serif;font-size:2rem;text-decoration:none;line-height:1}
.nav ul{list-style:none;display:flex;gap:1.6rem;padding:0;flex-wrap:wrap}
.nav ul a{text-decoration:none;font-weight:600;padding:.25rem 0;border-bottom:3px solid transparent}
.nav ul a:hover,.nav ul a[aria-current]{border-bottom-color:var(--pink)}

/* buttons */
.btn{display:inline-block;background:var(--pink);color:var(--ink);font-weight:700;text-decoration:none;padding:.9rem 1.6rem;border-radius:99px;border:3px solid var(--ink);transition:transform .2s;position:relative;z-index:5}
.btn:hover{transform:translateY(-3px) rotate(-1.5deg)}
.btn.alt{background:var(--paper);}
.link{font-weight:700;text-decoration-thickness:3px;text-underline-offset:5px;text-decoration-color:var(--pink)}

/* hero */
.hero{position:relative;overflow:hidden;min-height:92vh;display:flex;flex-direction:column}
.hero .wrap{width:100%}
.hero h1{max-width:13ch;margin-top:clamp(2rem,6vw,5rem);position:relative;z-index:3}
.hero .btn{margin-top:2rem}
.giant{font-family:"Bagel Fat One",sans-serif;font-size:clamp(7rem,30vw,26rem);line-height:.75;margin-top:auto;white-space:nowrap;transform:translateY(12%);position:relative;z-index:2;padding-left:1rem;user-select:none}
.hero-pad{padding-bottom:2rem}

/* ---------- stickers ---------- */
.st{position:absolute;z-index:4;display:flex;align-items:center;justify-content:center;text-align:center;
  transform:translate(var(--dx,0px),var(--dy,0px)) rotate(var(--r,0deg));transition:transform .25s,filter .25s;
  cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;
  font-family:"Radio Canada Big",sans-serif;font-weight:700;line-height:1.05;letter-spacing:-.02em;
  filter:drop-shadow(0 2px 0 rgba(0,0,0,.22))}
.st:hover{transform:translate(var(--dx,0px),var(--dy,0px)) rotate(0deg) scale(1.07)}
.st img{pointer-events:none;-webkit-user-drag:none}
.st.round{border-radius:50%;aspect-ratio:1;padding:.6rem}
.st.pill{border-radius:99px;padding:.55rem 1.1rem;white-space:nowrap}
.st.tag{border-radius:14px;padding:.8rem 1.1rem}
.st.c-pink{background:var(--pink);color:var(--ink);border:4px solid var(--paper)}
.st.c-moss{background:var(--moss);color:var(--paper);border:4px solid var(--paper)}
.st.c-ink{background:var(--ink);color:var(--paper);border:4px solid var(--paper)}
.st.c-paper{background:var(--paper);color:var(--ink);border:4px solid var(--ink)}
.on-paper .st.c-paper,.sec:not(.moss):not(.ink):not(.pinkbg) .st.c-paper{border-color:var(--ink)}
.st.c-ink.edge{border-color:var(--pink)}
.st .big{display:block;font-family:"Bagel Fat One",sans-serif;font-weight:400;font-size:1.9em;line-height:.9;letter-spacing:0}
.st small{display:block;font-family:"Google Sans Flex",sans-serif;font-weight:600;font-size:.62em;letter-spacing:.02em;margin-top:.15rem}
.st.s1{width:130px;font-size:1rem}.st.s2{width:170px;font-size:1.15rem}.st.s3{width:210px;font-size:1.3rem}.st.s4{width:260px;font-size:1.5rem}
.st.torch{width:clamp(130px,17vw,230px);background:none;border:0;padding:0;border-radius:50%}
.st.torch img{width:100%}
.st.nametag{width:220px;padding:0;border:4px solid var(--ink);background:var(--paper);color:var(--ink);border-radius:12px;flex-direction:column;overflow:hidden}
.st.nametag .hd{background:var(--red);color:#fff;width:100%;padding:.5rem .4rem;font-size:.95rem;letter-spacing:.04em}
.st.nametag .nm{padding:.9rem .5rem .3rem;font-size:2.4rem;font-family:"Bagel Fat One",sans-serif;font-weight:400;letter-spacing:0}
.st.nametag .sub{padding:0 .5rem .8rem;font-family:"Google Sans Flex",sans-serif;font-weight:600;font-size:.9rem}
.st.rosette{width:150px;aspect-ratio:1;background:var(--pink);color:var(--ink);border:4px solid var(--ink);padding:1rem;border-radius:50%;
  box-shadow:0 0 0 8px var(--paper),0 0 0 12px var(--ink);font-size:.95rem}
.st.sparkle{width:70px;height:70px;color:var(--paper)}
.st.sparkle svg{width:100%;height:100%}
.st.bubble{background:var(--paper);color:var(--ink);border:4px solid var(--ink);border-radius:50% 50% 50% 8%;padding:1.2rem 1.4rem;font-size:1.6rem;font-family:"Bagel Fat One",sans-serif;font-weight:400}
.st.cursor{width:auto;gap:.5rem}
.st.cursor svg{width:1.6rem;height:1.6rem}

/* peel + drag (see site.js) */
.st-layer{position:absolute;left:0;top:0;width:0;height:0;z-index:50}
.st-layer .st{z-index:50}
.st.peeling{cursor:grabbing;transition:none;filter:drop-shadow(0 22px 14px rgba(0,0,0,.38)) drop-shadow(0 2px 0 rgba(0,0,0,.2));
  transform:translate(var(--dx,0px),var(--dy,0px)) perspective(700px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) rotate(calc(var(--r,0deg) + var(--vr,0deg))) scale(1.1);z-index:60}
.st.peeling.lift{animation:lift .34s cubic-bezier(.2,.9,.3,1.3)}
.st.slap{animation:slap .38s cubic-bezier(.3,1.5,.5,1)}
@keyframes lift{0%{transform:translate(var(--dx),var(--dy)) rotate(var(--r)) scale(1)}100%{transform:translate(var(--dx),var(--dy)) perspective(700px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) rotate(calc(var(--r) + var(--vr,0deg))) scale(1.1)}}
@keyframes slap{0%{transform:translate(var(--dx),var(--dy)) rotate(var(--r)) scale(1.12)}45%{transform:translate(var(--dx),var(--dy)) rotate(var(--r)) scale(.93)}100%{transform:translate(var(--dx),var(--dy)) rotate(var(--r)) scale(1)}}
/* gloss that follows the grabbed corner, plus one quick sweep, both clipped to the sticker's own shape */
.st::before,.st::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0}
.st::after{background:linear-gradient(var(--sa,135deg),rgba(255,255,255,.38),rgba(255,255,255,0) 42%),linear-gradient(calc(var(--sa,135deg) + 180deg),rgba(0,0,0,.14),rgba(0,0,0,0) 40%);transition:opacity .2s}
.st::before{background:linear-gradient(var(--sa,135deg),transparent 40%,rgba(255,255,255,.75) 50%,transparent 60%);background-size:260% 260%;background-position:110% 110%}
.st.peeling::after{opacity:1}
.st.peeling::before{animation:sheen .5s ease-out forwards}
@keyframes sheen{0%{opacity:1;background-position:110% 110%}100%{opacity:0;background-position:-10% -10%}}
.st-hint{font-weight:600}
.reset{background:none;border:0;font:inherit;font-weight:700;color:inherit;text-decoration:underline;text-decoration-color:var(--pink);text-decoration-thickness:3px;text-underline-offset:5px;cursor:pointer}
@media (prefers-reduced-motion:reduce){.st,.st-flap{transition:none}.st.peeling.lift,.st.slap,.st.peeling::before{animation:none}html{scroll-behavior:auto}}

/* intro */
.intro{display:grid;grid-template-columns:1.6fr 1fr;gap:3rem;align-items:center}
.intro h2{max-width:20ch}
.intro p{max-width:34rem;margin-top:1.4rem}
.intro .stage{position:relative;min-height:300px}

/* work grid */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:3rem 1.5rem;margin-top:2.5rem}
.tile{display:block;text-decoration:none;position:relative}
.tile .thumb{display:block;aspect-ratio:4/3;border-radius:14px;overflow:hidden;background:var(--moss);border:4px solid var(--moss);transition:transform .25s}
.tile .thumb img{width:100%;height:100%;object-fit:cover;border-radius:8px}
.tile:hover .thumb{transform:rotate(-1deg) translateY(-4px)}
.tile h3{margin-top:1rem}
.tile p{margin-top:.2rem;font-size:.98rem}
.tile.feature{grid-column:1/-1}
.tile.feature .thumb{aspect-ratio:16/8}
.tile .st{pointer-events:auto}

/* stat band */
.band{display:flex;flex-wrap:wrap;gap:2rem;align-items:center;justify-content:space-between}
.stat{font-family:"Bagel Fat One",sans-serif;font-size:clamp(3.4rem,10vw,8rem);line-height:.95}
.stat span{color:var(--pink)}
.band p{max-width:24rem}

/* footer */
.foot{padding:clamp(4rem,9vw,7rem) 0 0;overflow:hidden;position:relative}
.foot h2{max-width:14ch}
.foot .row{display:flex;flex-wrap:wrap;gap:1rem 2rem;align-items:center;margin-top:2rem}
.foot .giant{color:var(--pink);margin-top:3rem;transform:translateY(14%);text-align:right;padding-left:0;padding-right:1rem}
@media (min-width:821px){.foot .giant{margin-top:-4.5rem}}
.foot small{display:block;margin-top:2rem;opacity:.85}

/* case studies */
.case-head{padding-bottom:0}
.case-hero{padding:clamp(2.5rem,7vw,5rem) 0 clamp(3rem,8vw,6rem);position:relative}
.case-hero h1{max-width:14ch}
.case-hero p{max-width:38rem;margin-top:1.4rem;font-size:1.25rem}
.meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1.5rem 2rem;padding:2rem 0;border-bottom:3px solid var(--ink)}
.meta dt{font-weight:700;font-size:.95rem;opacity:.75}
.meta dd{font-family:"Radio Canada Big",sans-serif;font-weight:700;font-size:1.25rem;line-height:1.2;letter-spacing:-.02em;margin-top:.15rem}
.prose{display:grid;grid-template-columns:1fr 2fr;gap:2rem 3rem;padding:3.5rem 0;align-items:start}
.prose h2{font-size:clamp(1.8rem,3.4vw,2.6rem)}
.prose .body{max-width:40rem}
.prose .body>*+*{margin-top:1em}
figure.shot{margin:1rem 0}
figure.shot .frame{border:4px solid var(--moss);border-radius:14px;overflow:hidden;background:var(--moss)}
figure.shot img{width:100%;height:auto;border-radius:8px}
figcaption{font-size:.95rem;margin-top:.7rem;opacity:.85}
.shots{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.5rem;margin:1rem 0}
.bars{display:grid;gap:1rem;margin-top:1.5rem}
.bar{display:flex;align-items:center;gap:1rem}
.bar b{min-width:5.5rem;font-weight:700}
.bar i{display:block;height:3rem;border-radius:99px;font-style:normal;display:flex;align-items:center;padding:0 1.2rem;font-family:"Radio Canada Big",sans-serif;font-weight:700}
.bar.before i{background:var(--ink);color:var(--paper);width:100%}
.bar.after i{background:var(--pink);color:var(--ink);width:7rem}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.4rem;margin-top:2rem}
.card{background:var(--paper);color:var(--ink);border:4px solid var(--ink);border-radius:16px;padding:1.5rem;position:relative}
.card h3{font-size:1.35rem;margin-bottom:.5rem}
.card.moss{background:var(--moss);color:var(--paper)}
.card.pinkbg{background:var(--pink)}
.card.ink{background:var(--ink);border-color:var(--paper)}
.next{display:block;text-decoration:none;padding:clamp(3rem,8vw,6rem) 0}
.next span{display:block;font-weight:600;margin-bottom:.5rem}
.next b{font-family:"Radio Canada Big",sans-serif;font-size:clamp(2.2rem,6vw,4.6rem);letter-spacing:-.03em;line-height:1}
.next:hover b{text-decoration:underline;text-decoration-color:var(--pink);text-decoration-thickness:6px;text-underline-offset:8px}
.placeholder-note{border:3px dashed currentColor;border-radius:14px;padding:1rem 1.2rem;font-size:.95rem}
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1.4rem;counter-reset:s;margin-top:2rem;list-style:none;padding:0}
.steps li{counter-increment:s;border-top:5px solid var(--pink);padding-top:1rem}
.steps li::before{content:counter(s);font-family:"Bagel Fat One",sans-serif;font-size:2.6rem;display:block;line-height:1}
.steps h3{font-size:1.3rem;margin:.4rem 0}
.swatches{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:1rem}
.swatches i{width:64px;height:64px;border-radius:50%;border:4px solid var(--ink);display:block}

/* about */
.about-top{display:grid;grid-template-columns:1.3fr 1fr;gap:3rem;align-items:center}
.polaroid{background:#fff;padding:.9rem .9rem 3rem;border-radius:4px;box-shadow:0 12px 30px rgba(0,0,0,.25);transform:rotate(3deg);position:relative;max-width:360px;justify-self:center;color:var(--ink)}
.polaroid img{width:100%;aspect-ratio:4/5;object-fit:cover;background:var(--moss)}
.polaroid p{position:absolute;bottom:.7rem;left:0;right:0;text-align:center;font-family:"Bagel Fat One",sans-serif;font-size:1.4rem;margin:0}
.timeline{list-style:none;padding:0;margin-top:2.5rem;border-left:5px solid var(--pink)}
.timeline li{padding:0 0 2rem 1.6rem;position:relative}
.timeline li::before{content:"";position:absolute;left:-14px;top:.35rem;width:22px;height:22px;border-radius:50%;background:var(--paper);border:5px solid var(--ink)}
.timeline h3{font-size:1.4rem}
.timeline time{font-weight:600;font-size:.95rem;opacity:.85}
.stack{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.4rem;margin-top:2rem}
.stack h3{font-size:1.3rem;margin-bottom:.8rem}
.chips{display:flex;flex-wrap:wrap;gap:.5rem;list-style:none;padding:0}
.chips li{border:3px solid currentColor;border-radius:99px;padding:.15rem .8rem;font-weight:600;font-size:.95rem}
.chips li.soon{border-style:dashed}
.shelf{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:2rem 1.4rem;margin-top:3rem;align-items:end;padding-bottom:1.2rem;border-bottom:10px solid var(--paper)}
.award{text-align:center}
.award .medal{width:140px;height:140px;margin:0 auto 1rem;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:"Bagel Fat One",sans-serif;font-size:1.5rem;line-height:1;background:var(--pink);color:var(--ink);border:5px solid var(--paper);box-shadow:0 0 0 6px var(--ink)}
.award .medal.pennant{border-radius:0;clip-path:polygon(0 0,100% 50%,0 100%);width:150px;height:110px;box-shadow:none;border:0;padding-right:2rem;justify-content:flex-start;padding-left:1rem}
.award .medal.dashed{background:transparent;color:var(--paper);border:4px dashed var(--paper);box-shadow:none}
.award h3{font-size:1.15rem}
.award p{font-size:.92rem;margin-top:.2rem}

/* selected works pinboard */
.board{columns:3 260px;column-gap:2rem;margin-top:3rem}
.pin{break-inside:avoid;margin:0 0 2.6rem;position:relative;transform:rotate(var(--r,0deg));transition:transform .25s}
.pin:hover{transform:rotate(0) scale(1.03);z-index:3}
.pin .frame{background:#fff;padding:.7rem;border-radius:3px;box-shadow:0 10px 24px rgba(0,0,0,.28)}
.pin img{width:100%;height:auto;background:var(--moss)}
.pin figcaption{color:var(--ink);font-family:"Radio Canada Big",sans-serif;font-weight:700;letter-spacing:-.02em;margin:.7rem .2rem .2rem;opacity:1}
.pin::before{content:"";position:absolute;top:-10px;left:50%;width:22px;height:22px;margin-left:-11px;border-radius:50%;background:var(--ink);border:4px solid var(--paper);z-index:2}

/* responsive */
@media (max-width:820px){
  .intro,.about-top,.prose{grid-template-columns:1fr}
  .intro .stage{min-height:240px}
  .tile.feature .thumb{aspect-ratio:4/3}
  .st.s4{width:200px}.st.s3{width:170px}
  .nav ul{gap:1rem}
  .bar{flex-direction:column;align-items:flex-start}
}
@media (max-width:520px){.nav ul{width:100%}.st.nametag{width:180px}}
.tile .thumb img{display:block}
@media (max-width:820px){
  .hero{min-height:88vh}
  .hero h1{margin-top:1.5rem}
  .st.torch.hero-torch{top:auto!important;bottom:26%;right:5%!important;width:34vw}
  .hero .st.sparkle{display:none}
  .giant{font-size:clamp(6rem,34vw,14rem)}
  .nav ul{gap:.9rem 1.2rem}
  .foot .st{right:4%!important}
  .shelf{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
  .st.rosette{width:120px;font-size:.8rem}
  .band .st.rosette{position:relative;top:auto!important;right:auto!important;margin:.5rem 1rem 0 0}
  .board{columns:2 150px;column-gap:1rem}
  .btn{padding:.8rem 1.2rem}
  .foot .row .btn{width:100%;text-align:center}
}
@media (max-width:820px){.foot .st{top:auto!important;bottom:-.5rem;width:110px;font-size:.9rem}}

/* ---- layout matched to the original mockups ---- */
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.hero .st.torch.hero-torch{z-index:1}
.stage{position:relative;min-height:220px}
/* work cards */
.grid{grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:2.6rem 1.5rem;margin-top:0}
.tile{background:#1f1f1f;border-radius:14px;color:var(--paper)}
.tile .thumb{border:0;border-radius:14px 14px 0 0;aspect-ratio:16/10;display:block}
.tile .thumb img{border-radius:0}
.tile .tx{display:block;padding:1.1rem 1.3rem 1.4rem}
.tile .tx h3{margin:0}
.tile .tx p{color:#d8d3c9;margin-top:.3rem;font-size:1rem}
.tile:hover .thumb{transform:none}
.tile:hover{transform:translateY(-4px) rotate(-.4deg)}
.tile{transition:transform .25s}
.tile:first-child{grid-column:1/-1}
.tile:first-child .thumb{aspect-ratio:16/7}
.st.ribbon{background:none;border:0;padding:0}
.st.flame{background:none;border:0;padding:0}
.band{position:relative}
.stat{font-size:clamp(3.4rem,11vw,8.5rem)}
/* case studies */
.case-head .case-hero{padding-bottom:3rem}
.meta{border:0;padding:1.6rem 0 0;max-width:46rem}
.meta dt{color:var(--paper);opacity:1;font-weight:600}
.meta dd{color:var(--paper)}
.blk{padding:clamp(2.6rem,6vw,4.5rem) 0;background:var(--paper);color:var(--ink)}
.blk.ink{background:var(--ink);color:var(--paper)}
.blk .bin{max-width:46rem}
.blk h2{font-size:clamp(1.7rem,3.4vw,2.4rem);margin-bottom:.8rem}
.blk .bin>*+*{margin-top:1rem}
.imb{border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:.85rem;font-weight:600;letter-spacing:.04em;text-align:center;padding:1rem}
.two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem;margin-top:1.2rem}
.swrow{display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem;margin-top:1.2rem}
.swrow i{height:56px;border-radius:8px;display:block}
.frame{display:block;border-radius:10px;overflow:hidden}
figure.shot .frame{border:0}
figure.shot img{border-radius:0}
.strip{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem}
.strip .frame img{aspect-ratio:4/5;object-fit:cover;width:100%}
.blk:has(figure){padding-bottom:0}
.next{display:block;text-decoration:none;padding:1.4rem 0}
.next .wrap{display:flex;justify-content:space-between;align-items:center;gap:1rem}
.next span{display:inline;margin:0;font-weight:600}
.next b{font-size:clamp(1.3rem,3vw,2rem)}
.toolcards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.9rem;margin-top:1.2rem}
.tc{border:4px solid;border-radius:14px;padding:1rem;transform:rotate(var(--r))}
.tc b{font-family:"Radio Canada Big",sans-serif;font-weight:700;font-size:1.15rem;letter-spacing:-.02em;display:block}
.tc p{margin-top:.3rem;font-size:.95rem}
.bars p{margin:.4rem 0 0;font-size:.9rem}
.bar{display:block}
.bar.before i{height:2.2rem;font-size:.9rem;width:100%;border-radius:6px}
.bar.after{display:flex;align-items:center;gap:.6rem}
.bar.after i{width:1.4rem;height:2.2rem;border-radius:6px;flex:none;padding:0}
.bar.after b{font-weight:700}
.play{width:46px;height:46px;border-radius:50%;background:var(--pink);color:var(--ink);display:flex;align-items:center;justify-content:center}
.stat2{font-family:"Radio Canada Big",sans-serif;font-weight:700;font-size:2rem;letter-spacing:-.02em}
.blk .card{border-radius:10px;border-width:0}
.blk .card.moss p,.blk .card p{font-size:.95rem}
.tl{list-style:none;padding:0;border-left:4px solid var(--pink);margin-top:1.2rem}
.tl li{padding:0 0 1.2rem 1.2rem}
.tl b{font-family:"Radio Canada Big",sans-serif;font-weight:700;font-size:1.15rem;display:block}
.tl p{color:#d8d3c9}
h1.bagel{font-family:"Bagel Fat One",sans-serif;font-weight:400;letter-spacing:0;max-width:none;font-size:clamp(3rem,10vw,7rem)}
/* selected works */
.board{columns:3 240px;column-gap:1rem;margin-top:1.5rem}
.pin{margin:0 0 1rem;transform:none}
.pin:hover{transform:none}
.pin::before{display:none}
.pin .frame{padding:0;box-shadow:none;border-radius:8px;background:none}
.pin img{display:block;border-radius:8px}
.pin figcaption{color:var(--paper);font-size:.95rem;margin:.4rem .1rem 0}
@media (max-width:820px){.two,.toolcards{grid-template-columns:1fr 1fr}.tile:first-child .thumb{aspect-ratio:16/10}.board{columns:2 140px}.st.ribbon{right:4%!important;bottom:1rem!important;width:84px!important;height:100px!important}.stage{min-height:200px}}
.grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.bar.before i{height:auto;min-height:2.2rem;padding:.45rem .9rem;border-radius:12px;line-height:1.25}
@media (max-width:820px){
  .grid{grid-template-columns:1fr}
  .case-hero .st{top:auto!important;bottom:.4rem;right:4%!important}
  .case-head .case-hero{padding-bottom:4.5rem}
  .bar.after{flex-direction:row;align-items:center}
}

.dot{color:var(--pink)}
.pinkbg .logo .dot{color:var(--paper)}
/* irregular shapes: no box-shaped gloss, the lift and shadow do the work */
.st.torch::before,.st.torch::after,.st.sparkle::before,.st.sparkle::after,.st.ribbon::before,.st.ribbon::after,.st.flame::before,.st.flame::after{display:none}
.social{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.8rem;margin-top:1.2rem;align-items:start}
.social .shot{margin:0}
.social img{width:100%;height:auto;display:block}
.social figcaption{color:#d8d3c9;font-size:.85rem}
.blk.ink .bin:has(.social){max-width:60rem}
.polaroid img{object-position:70% 60%}
@media (max-width:820px){.social{grid-template-columns:repeat(2,minmax(0,1fr))}}
.st.torch img{height:auto;width:100%}
.case-hero h1{max-width:20ch}
.two{align-items:start}
.two .frame img{aspect-ratio:4/3;object-fit:cover;width:100%}
.social{display:block;columns:3 200px;column-gap:.8rem}
.social .shot{break-inside:avoid;margin:0 0 .8rem}
@media (max-width:820px){.social{columns:2 140px}}
img{height:auto}
.card.ink{color:var(--paper)}
.polaroid img{aspect-ratio:4/5;object-fit:cover;width:100%}
.pin.wide{column-span:all;margin-top:.4rem}
/* one consistent rhythm inside every content block */
.blk .bin{display:flex;flex-direction:column;gap:1rem;max-width:52rem}
.blk .bin>*+*{margin-top:0}
.blk .bin>h2{margin:0 0 -.1rem}
.blk .bin>.two,.blk .bin>.swrow,.blk .bin>.toolcards,.blk .bin>.bars,.blk .bin>.social,.blk .bin>.tl,.blk .bin>.steps,.blk .bin>.imb,.blk .bin>.cards{margin-top:.4rem}
.blk .bin:has(.social){max-width:60rem}
.swrow,.two,.toolcards{gap:.8rem}
.placeholder-note{padding:.7rem 1rem;font-size:.88rem;border-width:2px;margin:0}
.blk .bin>p{margin:0}
.blk .bin>p.placeholder-note{margin-top:0}
.blk .bin>.two,.blk .bin>.swrow,.blk .bin>.toolcards,.blk .bin>.bars,.blk .bin>.social,.blk .bin>.tl,.blk .bin>.steps,.blk .bin>.imb,.blk .bin>.cards{margin-top:0}
.toolcards{row-gap:1.1rem}

/* reset button must sit above the giant footer wordmark */
.giant{pointer-events:none}
.st-hint,.st-hint .reset{position:relative;z-index:3}
.reset{position:relative;z-index:3}

.swrow{grid-template-columns:repeat(auto-fit,minmax(56px,1fr))}
.swrow i{height:64px}

/* tighter hero byline so the big "libby" always shows in the first screen */
.hero{min-height:min(92vh,56rem)}
.hero h1{max-width:19ch;font-size:clamp(2.6rem,6vw,5rem);margin-top:clamp(1rem,3vw,2.5rem)}
.hero .btn{margin-top:1.4rem}
.giant{font-size:clamp(7rem,24vw,21rem);margin-top:auto;padding-top:1.5rem;transform:translateY(8%)}
@media (max-width:720px){.hero h1{max-width:none}.giant{font-size:clamp(6rem,34vw,14rem)}}

/* every block gets the same padding top and bottom, even when it ends in a figure */
.blk:has(figure){padding-bottom:clamp(2.6rem,6vw,4.5rem)}
.blk>.wrap>figure.shot:only-child,.blk .bin figure{margin-bottom:0}
.blk figcaption{margin-bottom:0}
.blk:not(.ink)+.blk:not(.ink){padding-top:0}

/* hero scales with window height too, so the big "libby" is never cut off */
.hero{min-height:100vh;min-height:100svh}
.hero h1{max-width:22ch;font-size:clamp(1.9rem,min(5.6vw,10vh),5rem)}
.hero .btn{margin-top:clamp(.8rem,2.2vh,1.4rem)}
.giant{font-size:clamp(4rem,min(24vw,27vh),21rem);padding-top:1rem}
@media (max-width:720px){.hero h1{font-size:clamp(2rem,min(9vw,7vh),3rem)}.giant{font-size:clamp(5rem,min(34vw,22vh),14rem)}}
.hero .giant{transform:none;line-height:.95;padding-top:.5rem;margin-bottom:0}

/* blocks span the same width as the images, so there's no dead space on the right */
.blk .bin,.blk .bin:has(.social),.blk.ink .bin:has(.social){max-width:none}
.blk .bin>p{max-width:48rem}
.blk .bin>.placeholder-note{max-width:none}

/* big "libby" back to its original look: huge, tucked into the bottom edge */
.hero{min-height:92vh}
.giant{font-size:clamp(7rem,30vw,26rem);line-height:.75;margin-top:auto;padding-top:0;transform:translateY(12%)}
.hero .giant{font-size:clamp(7rem,30vw,26rem);line-height:.75;padding-top:0;transform:translateY(12%)}
@media (max-width:720px){.hero{min-height:88vh}.giant,.hero .giant{font-size:clamp(6rem,34vw,14rem)}}
.hero h1{text-wrap:balance}
@media (min-width:721px){.hero h1{max-width:none;white-space:nowrap;font-size:clamp(2rem,min(5.6vw,4.6rem),4.6rem)}}
.hero{min-height:100vh;min-height:100svh}
@media (max-width:720px){.hero{min-height:100vh;min-height:100svh}}
@media (min-width:721px){.hero h1{font-size:min(3.4vw,2.9rem);line-height:1.15}}
@media (min-width:721px){.hero h1{font-size:min(calc((100vw - 4rem) / 30),2.6rem)}}
@media (max-width:720px){.hero h1{font-size:clamp(1.7rem,7vw,2.4rem);line-height:1.1}}
.blk .bin>p{max-width:none}

/* bigger byline on two balanced lines, more air under it, smaller wordmark */
@media (min-width:721px){.hero h1{white-space:normal;text-wrap:balance;max-width:none;font-size:min(calc((100vw - 4rem) / 17),4.2rem);line-height:1.1;margin-bottom:2.2rem}}
@media (max-width:720px){.hero h1{margin-bottom:1.6rem}}
.hero .btn{margin-top:0;margin-bottom:clamp(3rem,8vh,6rem);align-self:flex-start}
.giant,.hero .giant{font-size:clamp(5.5rem,21vw,19rem)}
@media (max-width:720px){.giant,.hero .giant{font-size:clamp(5rem,30vw,12rem)}}
.st.bell{background:none;border:0;padding:0}
.st.bell::before,.st.bell::after{display:none}
@media (max-width:720px){
  .moss .st.torch:not(.hero-torch){left:auto!important;right:4.6rem!important;top:.7rem!important;width:62px!important}
  .moss .st.bell{left:auto!important;right:1.1rem!important;top:.6rem!important;width:50px!important;height:55px!important}
  .about-top{padding-top:2rem!important}
}
.award .shelf-art{display:block;margin:0 auto 1rem;height:auto;max-width:100%;overflow:visible}
.shelf{grid-template-columns:repeat(3,1fr)}
@media (max-width:560px){.shelf{grid-template-columns:repeat(2,1fr)}}
.timeline li::before{box-sizing:border-box;left:-13.5px;width:22px;height:22px}

/* overlap timeline: years run down the side, roles sit in lanes so overlaps show */
.gantt{position:relative;margin-top:2.5rem;padding-left:4rem;color:var(--paper)}
.gyears span{position:absolute;left:0;width:3.2rem;font-weight:700;font-size:.9rem;opacity:.9;transform:translateY(-.55em)}
.gyears span::after{content:"";position:absolute;left:3.4rem;top:.55em;width:100vw;max-width:2000px;border-top:1px dashed rgba(241,236,226,.18);pointer-events:none}
.gbars{list-style:none;margin:0;padding:0;position:absolute;left:4rem;right:0;top:0;bottom:0}
.gb{position:absolute;width:calc((100% - 1.2rem) / 3);box-sizing:border-box;border-radius:14px;padding:.55rem .85rem;overflow:hidden;color:var(--ink);background:var(--paper);border:3px solid var(--ink);z-index:1}
.gb.work{background:var(--pink)}
.gb.study{background:var(--paper)}
.gb.side{background:var(--moss);color:var(--paper);border-color:var(--paper)}
.gb h3{font-size:1rem;line-height:1.15}
.gb time{font-family:"Google Sans Flex",sans-serif;font-weight:600;font-size:.8rem;margin-left:.3rem;opacity:1}
.gb p{font-size:.88rem;line-height:1.3;margin-top:.2rem}
.gb.tiny{padding:.25rem .85rem;display:flex;gap:.5rem;align-items:center}
.gb.tiny p{margin:0}
.tl-list{display:none}
@media (max-width:760px){.gantt{display:none}.tl-list{display:block}}

/* stickers that are standalone SVG files (images/stickers/*.svg): the artwork carries its own colours, border and text */
.st.svg{background:none;border:0;padding:0;border-radius:0;box-shadow:none;aspect-ratio:auto;height:auto;display:block}
.st.svg img{display:block;width:100%;height:auto}
.st.svg::before,.st.svg::after{display:none}
@media (max-width:820px){.foot .st.svg{width:auto}}

/* skill stack: one row per group (label left, chips right), so it fills the width with no orphan card */
.stack{grid-template-columns:1fr;gap:.9rem}
.stack .card{display:grid;grid-template-columns:minmax(180px,230px) 1fr;gap:.6rem 1.5rem;align-items:center;padding:1.1rem 1.5rem}
.stack h3{margin:0}
.stack .chips{margin:0}
@media (max-width:640px){.stack .card{grid-template-columns:1fr;padding:1rem 1.1rem}.stack h3{margin-bottom:.3rem}}

/* photography page */
.ph-grid{display:grid;gap:1rem;margin-top:2rem}
.ph-jugs{grid-template-columns:repeat(4,1fr)}
.ph-bw{grid-template-columns:repeat(3,1fr)}
.ph{margin:0}
.ph img{display:block;width:100%;height:auto;border-radius:8px}
.ph-bw .ph img{aspect-ratio:1;object-fit:cover}
@media (max-width:820px){.ph-jugs{grid-template-columns:repeat(2,1fr)}.ph-bw{grid-template-columns:1fr 1fr}}

/* compact overlap timeline */
.gantt{margin-top:2rem}
.gb{padding:.4rem .75rem;border-radius:12px;border-width:2px}
.gb h3{font-size:.95rem}
.gb p{font-size:.82rem;line-height:1.25;margin-top:.1rem}
.gb.tiny{padding:.2rem .75rem;flex-wrap:nowrap;white-space:nowrap}
.gb.tiny h3{flex:none}
.gb.tiny p{overflow:hidden;text-overflow:ellipsis;min-width:0;opacity:.9}
.gb.small{padding:.2rem .75rem;display:flex;flex-direction:column;justify-content:center}
.gb.small h3{font-size:.9rem;line-height:1.15}
.gb.small p{font-size:.78rem;line-height:1.15;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ph-three{grid-template-columns:repeat(3,1fr)}
@media (max-width:820px){.ph-three{grid-template-columns:1fr 1fr}}
/* career strip */
.gantt,.tl-list{display:none!important}
.strip-wrap{margin-top:2rem;color:var(--paper)}
.skey{display:flex;flex-wrap:wrap;gap:.3rem 1.2rem;font-size:.85rem;margin:0 0 .9rem}
.skey i{display:inline-block;width:.8rem;height:.8rem;border-radius:3px;margin-right:.4rem;vertical-align:-1px}
.skey .s,.sb.s{background:#007352}.skey .w,.sb.w{background:var(--paper)}.skey .d,.sb.d{background:var(--pink)}
.strip{position:relative;height:164px}
.sticks span{position:absolute;top:0;bottom:0;border-left:1px solid #3a3a3a;padding-left:3px;font-size:.7rem;opacity:.8;font-variant-numeric:tabular-nums;display:flex;align-items:flex-end}
.sb{position:absolute;height:26px;border-radius:7px;color:var(--ink);font-size:.72rem;font-weight:600;padding:.28rem .5rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-sizing:border-box;border:1px solid #121212}
.slist{display:grid;grid-template-columns:repeat(auto-fit,minmax(17rem,1fr));gap:1.4rem 2rem;margin-top:2rem;color:var(--paper)}
.slist>div{border-top:2px solid var(--paper);padding-top:.6rem;min-width:0}
.slist b{display:block;font-size:1.15rem}
.slist time{font-size:.85rem;opacity:.75}
.slist p{margin:.3rem 0 0;line-height:1.45;font-size:.95rem}
@media (max-width:520px){.sb{font-size:.62rem;padding:.28rem .3rem}}
.pinlink{display:block}
.pin figcaption a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.strip{height:184px;margin-top:2.2rem;padding-left:5.4rem;box-sizing:border-box;color:var(--paper)}
.sin{position:absolute;left:5.4rem;right:0;top:0;bottom:0}
.slanes b{position:absolute;left:0;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;font-weight:600;opacity:.75;line-height:30px}
.slanes b:nth-child(1){top:6px!important}
.sb{height:30px;line-height:1.1;font-size:.78rem;padding:.4rem .55rem}
.sb.s{background:#007352}.sb.w{background:var(--paper)}.sb.d{background:var(--pink)}
@media (max-width:620px){.strip{padding-left:0;height:200px;margin-top:3.6rem}.sin{left:0}.slanes b{top:-1.6rem!important;line-height:1}.slanes b:nth-child(2){left:30%}.slanes b:nth-child(3){left:60%}}
.sb.d{overflow:visible;color:transparent}
.sb.d i{position:absolute;right:calc(100% + .6rem);top:0;line-height:30px;font-style:normal;color:var(--paper);white-space:nowrap;padding:0}
.skey{display:none}
@media (max-width:620px){.slanes{display:none}.skey{display:flex;margin-top:2rem}.strip{margin-top:.8rem}.sb.d i{display:none}}
.tile:first-child{grid-column:auto}
.tile:first-child .thumb{aspect-ratio:16/10}
.slist{display:block;max-width:50rem;margin-top:2.4rem;border-top:1px solid #3a3a3a}
.slist>div{display:grid;grid-template-columns:9.5rem 1fr;gap:.15rem 1.6rem;border-top:0;border-bottom:1px solid #3a3a3a;padding:1.1rem 0}
.slist time{grid-column:1;grid-row:1/3;font-size:.9rem;opacity:.7;font-variant-numeric:tabular-nums;padding-top:.2rem}
.slist b{grid-column:2;font-size:1.15rem}
.slist p{grid-column:2;margin:0;opacity:.9}
@media (max-width:560px){.slist>div{grid-template-columns:1fr}.slist time,.slist b,.slist p{grid-column:1;grid-row:auto}}

/* Photography: chronological justified rows. Layout: flex rows sized by aspect ratio so reading order stays left to right. */
.chrono{display:flex;flex-wrap:wrap;gap:0 10px;margin-top:1.4rem;margin-bottom:-10px}
.chrono figure{margin:0 0 10px;flex:calc(var(--ar)*100) 1 calc(var(--ar)*230px);min-width:0;border-radius:8px;overflow:hidden;background:#0a0a0a}
.chrono img{width:100%;height:auto;display:block}
@media (max-width:600px){.chrono figure{flex-basis:calc(var(--ar)*130px)}}

/* amart mosaic: columns are filled shortest-first by site.js; plain 3-col grid if JS is off */
.mosaic{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:6px;column-gap:.8rem;margin-top:1.2rem;align-items:start}
.mosaic>*{margin:0}
.mosaic img{width:100%;height:auto;display:block}
.mosaic figcaption{color:#d8d3c9;font-size:.85rem}
.pairset{display:flex;gap:.8rem;align-items:flex-start}
.pairset.stack{flex-direction:column}
.pairset.across,.pairset.across3{grid-column:span 2}
.pairset.across3{grid-column:span 3}
.pairset.across .shot,.pairset.across3 .shot{flex:var(--ar) 1 0;min-width:0}
.blk.ink .bin:has(.mosaic){max-width:none}
.blk .bin:has(.mosaic)>p{max-width:46rem}
.mosaic:not(.on){grid-auto-rows:auto;row-gap:.8rem}
@media (max-width:820px){.mosaic{grid-template-columns:repeat(2,minmax(0,1fr))}.pairset.across3{grid-column:span 2}}
/* case-study meta: full-width black band, one line */
.metaband{background:var(--ink);color:var(--paper)}
.metaband .meta{display:flex;flex-wrap:nowrap;gap:.6rem 3rem;max-width:none;margin:0;padding:1rem 0;border:0}
.metaband .meta>div{min-width:0;flex:0 1 auto}
.metaband .meta dt{font-size:.68rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;opacity:.6;color:var(--paper)}
.metaband .meta dd{font-size:.95rem;line-height:1.25;margin-top:.1rem;color:var(--paper)}
@media (max-width:720px){.metaband .meta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem 1.4rem}.metaband .meta dd{white-space:normal}}
@media (max-width:960px){.metaband .meta{flex-wrap:wrap;gap:.8rem 2rem}.metaband .meta dd{white-space:normal}}
.styled{display:flex;flex-wrap:wrap;gap:10px;margin-top:1.4rem;align-items:flex-start}
.styled figure{margin:0;border-radius:8px;overflow:hidden;background:#0a0a0a;max-width:100%}
.styled img{height:min(72vh,640px);width:auto;max-width:100%;display:block}
@media (max-width:640px){.styled img{height:auto;width:100%}.styled figure{width:100%}}
.chrono .brk{flex:0 0 100%;height:0;margin:0}
.chrono figure.fx{flex:0 0 calc(var(--ar)*380px);max-width:100%}
@media (max-width:760px){.chrono figure.fx{flex:calc(var(--ar)*100) 1 calc(var(--ar)*110px)}}
.styled2{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;align-items:start}
.styled2 figure{margin:0}.styled2 img{width:100%;height:auto;display:block}
@media(max-width:600px){.styled2{grid-template-columns:1fr}}
.chrono figure.tight{flex-basis:calc(var(--ar)*170px)}
.lgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:1.6rem}
.lg{margin:0}.lgbox{display:flex;align-items:center;justify-content:center;border-radius:12px;padding:8% 9%;aspect-ratio:4/3}
.lgbox img{width:100%;height:auto;display:block}
.lg figcaption{font-size:.8rem;margin-top:.5rem;opacity:.75}
.dcicon{display:grid;grid-template-columns:minmax(0,320px) 1fr;gap:2.5rem;align-items:center}
.dcicon .frame img{display:block;width:100%;height:auto}
@media(max-width:800px){.lgrid{grid-template-columns:repeat(2,minmax(0,1fr))}.dcicon{grid-template-columns:1fr;gap:1.2rem}}
@media(max-width:480px){.lgrid{grid-template-columns:1fr}}
.chrono figure[role=button]{cursor:zoom-in}
.chrono figure[role=button]:focus-visible{outline:3px solid #ff4f93;outline-offset:2px}
html.sp-open{overflow:hidden}
.spot{position:fixed;inset:0;z-index:1000;background:rgba(10,10,10,.96);display:flex;align-items:center;justify-content:center}
.spot[hidden]{display:none}
.sp-f{margin:0;max-width:calc(100vw - 160px);max-height:100vh;display:flex;flex-direction:column;align-items:center;gap:.8rem;padding:56px 0 64px}
.sp-f img{max-width:100%;max-height:calc(100vh - 150px);width:auto;height:auto;border-radius:6px;display:block}
.sp-f figcaption{color:#cfcabf;font-size:.85rem;text-align:center;max-width:46rem;line-height:1.4}
.spot button{position:absolute;background:rgba(255,255,255,.1);color:#f1ece2;border:0;border-radius:50%;width:48px;height:48px;font-size:1.5rem;line-height:1;cursor:pointer}
.spot button:hover{background:rgba(255,255,255,.22)}
.spot button:focus-visible{outline:3px solid #ff4f93;outline-offset:2px}
.sp-x{top:16px;right:16px}.sp-p{left:16px;top:50%;transform:translateY(-50%)}.sp-n{right:16px;top:50%;transform:translateY(-50%)}
.sp-c{position:absolute;bottom:18px;left:0;right:0;text-align:center;color:#cfcabf;font-size:.8rem;letter-spacing:.04em}
@media(max-width:700px){.sp-f{max-width:100vw;padding:64px 0 72px}.sp-f img{border-radius:0}.sp-p,.sp-n{top:auto;bottom:12px;transform:none}.sp-p{left:16px}.sp-n{right:16px}}
/* timeline table: Time | Place | Job */
.slist{max-width:none;margin-top:2.4rem}
.slist>div{grid-template-columns:9.5rem 13rem minmax(0,1fr);gap:.2rem 2rem;align-items:baseline}
.slist time{grid-column:1;grid-row:auto;padding-top:0}
.slist>div>b{grid-column:2;font-size:1.1rem}
.slist .jb{grid-column:3}
.slist .jb strong{display:block;font-size:1.1rem;font-family:"Radio Canada Big",sans-serif;font-weight:700}
.slist .jb p{grid-column:auto;margin:.25rem 0 0;max-width:46rem}
.slh{display:grid;grid-template-columns:9.5rem 13rem minmax(0,1fr);gap:0 2rem;padding:0 0 .7rem;font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;opacity:.6}
@media (max-width:860px){.slist>div{grid-template-columns:7rem minmax(0,1fr)}.slist>div>b{grid-column:2}.slist .jb{grid-column:2}.slh{display:none}.slist time{grid-row:1/3}}
@media (max-width:560px){.slist>div{grid-template-columns:1fr}.slist time,.slist>div>b,.slist .jb{grid-column:1;grid-row:auto}}
.invpair{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem;margin-top:2rem;align-items:start}
@media (max-width:700px){.invpair{grid-template-columns:1fr}}
.frame.ifr{background:#00AEEF;aspect-ratio:16/10;position:relative}
.frame.ifr iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
@media (max-width:700px){.frame.ifr{aspect-ratio:3/4}}
.why{list-style:none;padding:0;margin:0 0 1.4rem;max-width:44rem}
.why li{padding:.55rem 0;border-top:1px solid currentColor;border-top-color:rgba(127,127,127,.35)}
.why li:last-child{border-bottom:1px solid rgba(127,127,127,.35)}
.ba-h{font-size:.85rem;letter-spacing:.14em;text-transform:uppercase;margin:1.8rem 0 .7rem;opacity:.75;font-weight:700}
.ba3{display:grid;grid-template-columns:2fr 2fr 1fr;gap:.8rem;align-items:start}
.baub{display:grid;grid-template-columns:1fr 1fr 1fr;gap:.8rem;align-items:start;margin-top:1.4rem}
.baub1{margin-top:.8rem}
.ba3 img,.baub img,.baub1 img{width:100%;height:auto;display:block}
.baub .frame{display:flex;align-items:center;justify-content:center;min-height:0}
@media (max-width:700px){.ba3,.baub{grid-template-columns:1fr 1fr}.ba3 figure:last-child{grid-column:1/-1;max-width:220px}}
.ba-after{display:grid;grid-template-columns:1fr 1fr;gap:.8rem;align-items:start}@media (max-width:700px){.ba-after{grid-template-columns:1fr}}
@media (min-width:861px){
header.moss:has(.about-top){position:relative;z-index:3}
.about-top{padding-bottom:2.5rem!important;align-items:start}
.about-top>div:first-child{align-self:start;padding-top:7.5rem}
.about-top .polaroid{margin-bottom:-7rem}
}
.frame.ifr.book{background:#101010;aspect-ratio:16/11}
@media (max-width:760px){.frame.ifr.book{aspect-ratio:3/4.4}}
/* Selected works wall: the Image Sorter layout */
.board.wall{columns:auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:1px;column-gap:16px;row-gap:0;--g:16px;align-items:start}
.wall>*{margin:0!important}
.wall .pin.w2,.wall .set.across{grid-column:span 2}
.wall .set.across3{grid-column:span 3}
.wall .pair{display:flex;gap:16px;align-items:flex-start}
.wall .pair .m{min-width:0}
.wall .set.stack .pair{flex-direction:column}
.wall .set.stack .m{flex:none!important;width:100%}
.wall .pair img{width:100%;height:auto;display:block;border-radius:8px}
@media (max-width:820px){.board.wall{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:16px}.wall .set.across3{grid-column:span 2}}
.projrow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:start;margin:1.5rem 0 3rem}
.projrow .pin{margin:0}
@media (max-width:820px){.projrow{grid-template-columns:1fr;gap:16px}}
.projstack{display:flex;flex-direction:column;gap:16px}
@media (max-width:820px){.projstack{gap:16px}}
.projrow .projstack{grid-column:span 2}
@media (max-width:820px){.projrow .projstack{grid-column:auto}}
/* even 10px gutters, matching the photography page */
.board.wall{column-gap:10px;--g:10px}
.wall .pair{gap:10px}
.projrow{gap:10px;margin:1.5rem 0 10px}
.projstack{gap:10px}
.projrow .pin{position:relative}
.projrow .pin figcaption{position:absolute;left:10px;bottom:10px;margin:0;padding:.25rem .6rem;border-radius:999px;background:var(--paper);font-size:.8rem}
.projrow .pin figcaption a{color:var(--ink);text-decoration:none}
@media (max-width:820px){.board.wall{column-gap:10px}.projrow,.projstack{gap:10px}}
.wall .pin figcaption{position:absolute;left:10px;bottom:10px;margin:0;padding:.25rem .6rem;border-radius:999px;background:var(--paper);font-size:.8rem}
.wall .pin figcaption a{color:var(--ink);text-decoration:none}
/* top row: Frankie over Mango (2 cols), Pannier the full height beside them */
.projrow{align-items:stretch}
.projrow .projstack .pin .frame{aspect-ratio:5/2;display:block;overflow:hidden}
.projrow .projstack .pin img{width:100%;height:100%;object-fit:cover;display:block}
.projrow>.pin{height:100%}
.projrow>.pin .pinlink,.projrow>.pin .frame{display:block;height:100%}
.projrow>.pin img{width:100%;height:100%;object-fit:cover;display:block}
@media (max-width:820px){.projrow>.pin{height:auto}.projrow>.pin .pinlink,.projrow>.pin .frame{height:auto}.projrow>.pin img{height:auto}}
.projrow .projstack .pin .frame{aspect-ratio:5/2}
.projrow .projstack .pin:first-child img{object-position:50% 30%}
/* top row: no cropping; columns sized so Pannier matches the stacked pair */
.projrow{grid-template-columns:1fr .8757fr}
.projrow .projstack .pin .frame{aspect-ratio:auto}
.projrow .projstack .pin img{height:auto;object-fit:fill}
.projrow .projstack .pin:first-child img{object-position:50% 50%}
.projrow>.pin img{object-fit:cover}
@media (max-width:820px){.projrow{grid-template-columns:1fr}}
.projrow .projstack{grid-column:auto}
/* clearer link-outs on the top row, tighter gap to the wall */
.board.wall{margin-top:0!important}
.projrow .pin figcaption{left:14px;bottom:14px;padding:.45rem .95rem;background:var(--pink,#FF4F8B);box-shadow:0 4px 14px rgba(0,0,0,.35);font-size:1rem;line-height:1;transition:transform .2s}
.projrow .pin figcaption a{color:#121212;font-family:"Radio Canada Big",sans-serif;font-weight:700;letter-spacing:-.01em;text-decoration:none}
.projrow .pin:hover figcaption{transform:translateX(4px)}
.projrow .pin figcaption a::before{content:"View project  ";font-weight:600;opacity:.75;font-size:.8em}
/* a11y: readable captions on light blocks */
.blk:not(.ink) .social figcaption,.blk:not(.ink) .mosaic figcaption{color:#4a463d}
/* Amart system: palette and rules */
.pal{margin-top:1.6rem}
.pal h3,.rules h3{font-family:"Radio Canada Big",sans-serif;font-weight:700;font-size:1.05rem;margin:0 0 .6rem}
.pal ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(7.5rem,1fr));gap:10px}
.pal li{display:flex;flex-direction:column;gap:.15rem;font-size:.85rem}
.pal li i{display:block;height:3.4rem;border-radius:8px;border:1px solid rgba(255,255,255,.25);margin-bottom:.3rem}
.pal li span{opacity:.8;font-variant-numeric:tabular-nums}
.rules{display:grid;grid-template-columns:repeat(auto-fit,minmax(17rem,1fr));gap:10px;margin-top:2rem}
.rules>div{background:rgba(255,255,255,.07);border-radius:10px;padding:1rem 1.1rem}
.rules p{margin:0;font-size:.95rem;line-height:1.5}
.blk:not(.ink) .rules>div{background:rgba(18,18,18,.06)}
/* reusable price lockup demo */
.lkdemo{margin-top:1.6rem}
.lkstage{background:#EFEBE3;border-radius:12px;padding:2.2rem 1.4rem;display:flex;justify-content:center;overflow-x:auto}
.lk{--u:22px;font-size:var(--u);display:inline-flex;align-items:stretch;font-family:"Radio Canada Big",sans-serif;font-weight:700;line-height:1.1;max-width:100%}
.lk-p{background:#fff;color:#003470;padding:.7em .9em;border-radius:.35em 0 0 .35em;display:flex;flex-direction:column;gap:.15em;justify-content:center;box-shadow:0 .1em .4em rgba(0,0,0,.12)}
.lk-s{font-size:.8em;opacity:.85}
.lk-a{background:#EE263E;color:#fff;padding:.7em 1.9em .7em .9em;display:flex;flex-direction:column;justify-content:center;clip-path:polygon(0 0,calc(100% - 1.1em) 0,100% 50%,calc(100% - 1.1em) 100%,0 100%)}
.lk-save{font-size:.9em;letter-spacing:.04em}
.lk-price{font-size:1.5em}
.lkctl{display:grid;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));gap:12px;margin-top:1rem}
.lkctl label{display:flex;flex-direction:column;gap:.3rem;font-size:.9rem}
.lkctl input[type=text]{font:inherit;padding:.55rem .7rem;border-radius:8px;border:1px solid rgba(18,18,18,.35);background:#fff;color:#121212}
.lkctl input[type=range]{width:100%;accent-color:#EE263E}
.mosaic video{width:100%;height:auto;display:block}
.barow{display:flex;gap:.8rem;align-items:flex-start}
.barow .frame{display:block}
.barow img{width:100%;height:auto;display:block}
@media (max-width:700px){.barow{flex-wrap:wrap}.barow figure{flex:1 1 100%!important}}
.barow.cu{max-width:40rem}
/* captions: quieter, still >=4.5:1 */
.blk:not(.ink):not(.moss) .shot>figcaption,.blk:not(.ink):not(.moss) .social figcaption,.blk:not(.ink):not(.moss) .mosaic figcaption{color:#656054;opacity:1}
.blk.ink .mosaic figcaption,.blk.ink .social figcaption{color:#9a968d}
/* photo locations: shown on hover, and on tap for touch */
.chrono figure.hasloc{position:relative}
.chrono figcaption.loc{position:absolute;left:0;right:0;bottom:0;margin:0;padding:1.6rem .8rem .6rem;font-size:.8rem;line-height:1.3;color:#fff;background:linear-gradient(to top,rgba(0,0,0,.78),rgba(0,0,0,0));opacity:0;transition:opacity .2s;pointer-events:none}
.chrono figure.hasloc:hover figcaption.loc,.chrono figure.hasloc.show figcaption.loc{opacity:1}
@media (prefers-reduced-motion:reduce){.chrono figcaption.loc{transition:none}}
@media (hover:none){.chrono figure.hasloc figcaption.loc{opacity:1}}
@media (max-width:640px){section[aria-label="Headline result"] .band>div:first-child{padding-bottom:7.5rem}}
.lg.wide{grid-column:1/-1}.lg.wide .lgbox{aspect-ratio:auto;padding:2.4rem 1rem}.lg.wide .lgbox img{width:9rem;max-width:40%}
.dcfacts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.4rem 2.4rem;margin-top:1.4rem}
.dcfacts>div{border-top:2px solid var(--pink);padding-top:.7rem}
.dcfacts h3{font-size:1rem;letter-spacing:.04em;text-transform:uppercase;margin:0 0 .4rem;color:var(--pink)}
.dcfacts p{margin:0;max-width:34rem}
@media(max-width:700px){.dcfacts{grid-template-columns:1fr}}
/* brand-coloured case headers */
.case-head.b-amart{background:#02226D}
.case-head.b-la28{background:#115F72;--pink:#F89842}
.case-head.b-dc{background:#00AEEF;color:var(--ink)}
.case-head.b-frankie{background:#FDCEC4;color:var(--ink)}
.case-head.b-mango{background:#FED724;color:var(--ink)}
.case-head.b-pannier{background:#FFED03;color:var(--ink)}
.case-head.b-dc :focus-visible,.case-head.b-frankie :focus-visible,.case-head.b-mango :focus-visible,.case-head.b-pannier :focus-visible{outline-color:var(--ink)}
.case-head.b-amart{--pink:#FF3B4E}
.case-head.b-dc{--pink:#2b2f8e}
.case-head.b-frankie{--pink:#AB2C3C}
.case-head.b-mango{--pink:#C84B00}
.case-head.b-pannier{--pink:#F20574}
.case-head.b-de{background:#007352;color:var(--paper);--pink:#ACE2D4}

/* LA28 split sections: text beside a screen */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:2.4rem;align-items:center}
.split.flip{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr)}
.split.flip>.shot{order:-1}
.split .bin{max-width:none}
.split .shot{margin:0}
.split .shot .frame{display:block}
.split .shot img{width:100%;height:auto;display:block}
.blk.ink .split .stat2{color:var(--paper)}
@media (max-width:760px){.split,.split.flip{grid-template-columns:1fr;gap:1.4rem}.split.flip>.shot{order:0}}

/* centred spine timeline: entries alternate left and right of a centre line, so the list is half as tall */
.slist.spine{position:relative;display:block;max-width:62rem;margin:2.8rem auto 0;border:0;padding:0}
.slist.spine::before{content:"";position:absolute;left:50%;top:.4rem;bottom:.4rem;width:3px;margin-left:-1.5px;background:var(--pink);border-radius:2px}
.slist.spine>div{position:relative;display:block;width:calc(50% - 2.2rem);border:0;padding:0 0 1.6rem;margin:0}
.slist.spine>div:nth-child(odd){margin-right:auto;text-align:right}
.slist.spine>div:nth-child(even){margin-left:auto;text-align:left;margin-top:-4.4rem}
.slist.spine>div::before{content:"";position:absolute;top:.25rem;width:16px;height:16px;border-radius:50%;background:var(--pink);box-shadow:0 0 0 4px var(--ink)}
.slist.spine>div:nth-child(odd)::before{right:calc(-2.2rem - 8px)}
.slist.spine>div:nth-child(even)::before{left:calc(-2.2rem - 8px)}
.slist.spine time{display:block;grid-column:auto;grid-row:auto;font-size:.85rem;opacity:.75;padding:0 0 .15rem}
.slist.spine>div>b{display:block;grid-column:auto;font-size:1.2rem}
.slist.spine .jb{grid-column:auto}
.slist.spine .jb strong{font-size:1rem;opacity:.95}
.slist.spine .jb p{margin:.25rem 0 0;max-width:none;font-size:.92rem}
@media (max-width:720px){
  .slist.spine::before{left:7px;margin-left:0}
  .slist.spine>div,.slist.spine>div:nth-child(odd),.slist.spine>div:nth-child(even){width:auto;margin:0;padding:0 0 1.5rem 2.2rem;text-align:left}
  .slist.spine>div:nth-child(odd)::before,.slist.spine>div:nth-child(even)::before{left:0;right:auto}
}
/* vertical timeline only: key sits above the spine, dots are colour-coded */
.skey{display:flex!important;margin-top:1.8rem}
.slist.spine>div.ks::before{background:#007352}
.slist.spine>div.kw::before{background:var(--paper)}
.slist.spine>div.kd::before{background:var(--pink)}
.skey .s{background:#007352}.skey .w{background:var(--paper)}.skey .d{background:var(--pink)}
.skey i{border-radius:50%}
.slist.spine{margin-top:2rem}

/* overlap brackets: a bracket on the outer edge joins entries whose dates overlapped */
.slist.spine>div.g1,.slist.spine>div.g2{--bk:#a8a49b}
.slist.spine>div.g1::after,.slist.spine>div.g2::after{content:"";position:absolute;top:0;bottom:0;width:12px;border-left:3px solid var(--bk)}
.slist.spine>div.g1:nth-child(odd)::after,.slist.spine>div.g2:nth-child(odd)::after{left:-1.4rem}
.slist.spine>div.g1:nth-child(even)::after,.slist.spine>div.g2:nth-child(even)::after{left:calc(-100% - 4.4rem - 1.4rem)}
.slist.spine>div.gs::after{top:.25rem;border-top:3px solid var(--bk);border-top-left-radius:8px}
.slist.spine>div.ge::after{bottom:1.6rem;border-bottom:3px solid var(--bk);border-bottom-left-radius:8px}
.slist.spine>div.ge.ge::after{bottom:1.6rem}
.slist.spine .gl{position:absolute;left:-3.4rem;top:.25rem;writing-mode:vertical-rl;transform:rotate(180deg);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;opacity:.75;white-space:nowrap}
@media (max-width:720px){
  .slist.spine>div.g1,.slist.spine>div.g2{padding-right:1.6rem;display:flex;flex-direction:column}
  .slist.spine>div.g1::after,.slist.spine>div.g2::after,.slist.spine>div.g1:nth-child(odd)::after,.slist.spine>div.g1:nth-child(even)::after,.slist.spine>div.g2:nth-child(odd)::after,.slist.spine>div.g2:nth-child(even)::after{left:auto;right:0;border-left:0;border-right:3px solid var(--bk);width:10px}
  .slist.spine>div.gs::after{border-top:3px solid var(--bk);border-top-left-radius:0;border-top-right-radius:8px}
  .slist.spine>div.ge::after{border-bottom:3px solid var(--bk);border-bottom-left-radius:0;border-bottom-right-radius:8px}
  .slist.spine .gl{position:static;writing-mode:horizontal-tb;transform:none;display:block;order:-1;margin-bottom:.2rem}
}

/* vertical timeline, desktop: dots are years down the middle, jobs are bracketed boxes sized by how long they ran */
.vt{display:none}
@media (min-width:721px){
  .slist.spine{display:none!important}
  .vt{display:block;position:relative;margin:2.4rem 0 1rem;--ax:5rem}
  .vaxis{position:absolute;left:calc(50% - 1.5px);top:0;bottom:0;width:3px;background:var(--pink);border-radius:2px}
  .vaxis{position:absolute;left:50%;top:0;bottom:0;width:0}
  .vaxis::before{content:"";position:absolute;left:-1.5px;top:0;bottom:0;width:3px;background:var(--pink);border-radius:2px}
  .vaxis span{position:absolute;right:16px;width:3rem;text-align:right;margin-top:-.5em;font-size:.78rem;opacity:.85;font-variant-numeric:tabular-nums;line-height:1}
  .vaxis span i{position:absolute;right:-22px;top:calc(.5em - 6px);width:12px;height:12px;border-radius:50%;background:var(--paper);box-shadow:0 0 0 3px var(--ink)}
  .vb{position:absolute;box-sizing:border-box;padding:.1rem 0 .1rem .9rem;border-left:3px solid var(--bc);color:var(--paper);font-size:.88rem;line-height:1.3}
  .vb::before,.vb::after{content:"";position:absolute;left:-3px;width:11px;border-top:3px solid var(--bc)}
  .vb::before{top:0}.vb::after{bottom:0}
  .vb.ks{--bc:#007352}.vb.kw{--bc:var(--paper)}.vb.kd{--bc:var(--pink)}
  .vb time{display:inline;font-size:.78rem;opacity:.75;margin-right:.6rem}
  .vb b{display:inline;font-size:1.05rem;line-height:1.2;margin-right:.5rem}
  .vb strong{display:block;font-family:"Radio Canada Big",sans-serif;font-weight:700;font-size:.9rem;opacity:.95}
  .vb p{margin:.15rem 0 0;font-size:.85rem;opacity:.9}
  .vb.cA{left:0;width:calc((100% - var(--ax)) / 4 - .6rem)}
  .vb.cB{left:calc((100% - var(--ax)) / 4);width:calc((100% - var(--ax)) / 4 - .6rem)}
  .vb.cR{left:calc(50% + var(--ax) / 2)}
  .vb.cR{width:calc(50% - var(--ax) / 2)}
}

/* axis on the left: years run down the left edge, jobs sit in three columns to the right */
@media (min-width:721px){
  .vt{--ax:5.2rem;--area:calc(100% - var(--ax))}
  .vaxis{left:3.6rem}
  .vb.cA{left:var(--ax);width:calc(var(--area) * .25 - .8rem)}
  .vb.cB{left:calc(var(--ax) + var(--area) * .25);width:calc(var(--area) * .25 - .8rem)}
  .vb.cR{left:calc(var(--ax) + var(--area) * .5);width:calc(var(--area) * .5)}
}

/* side work (Youngbloods, freelance) sits on the outer right edge; study stays beside the axis */
@media (min-width:721px){
  .vb.cA{left:var(--ax);width:calc(var(--area) * .17 - .8rem)}
  .vb.cB{left:calc(var(--ax) + var(--area) * .17);width:calc(var(--area) * .17 - .8rem)}
  .vb.cR{left:calc(var(--ax) + var(--area) * .34);width:calc(var(--area) * .36 - .8rem)}
  .vb.cS{left:calc(var(--ax) + var(--area) * .70);width:calc(var(--area) * .15 - .8rem)}
  .vb.cT{left:calc(var(--ax) + var(--area) * .85);width:calc(var(--area) * .15)}
}
@media (min-width:721px){
  .vb.cA{width:calc(var(--area) * .15 - .8rem)}
  .vb.cB{left:calc(var(--ax) + var(--area) * .15);width:calc(var(--area) * .15 - .8rem)}
  .vb.cR{left:calc(var(--ax) + var(--area) * .30);width:calc(var(--area) * .43 - .8rem)}
  .vb.cS{left:calc(var(--ax) + var(--area) * .73);width:calc(var(--area) * .135 - .8rem)}
  .vb.cT{left:calc(var(--ax) + var(--area) * .865);width:calc(var(--area) * .135)}
}
/* TAFE nests just inside QUT's bracket: QUT's text ends long before TAFE starts, so they can share the column */
@media (min-width:721px){
  .vb.cA{width:calc(var(--area) * .30 - .8rem)}
  .vb.cB{left:calc(var(--ax) + 2.4rem);width:calc(var(--area) * .30 - 3.2rem)}
}
/* employment nests right beside QUT's bracket (QUT's text ends long before work starts); TAFE and side work sit on the outer right */
@media (min-width:721px){
  .vb.cA{left:var(--ax);width:calc(var(--area) * .5)}
  .vb.cR{left:calc(var(--ax) + 2.4rem);width:calc(var(--area) * .70 - 3.2rem)}
}
/* narrower employment column; side work and TAFE get the freed width */
@media (min-width:721px){
  .vb.cR{width:calc(var(--area) * .46 - 3.2rem)}
  .vb.cS{left:calc(var(--ax) + var(--area) * .46 + .4rem);width:calc(var(--area) * .25)}
  .vb.cT{left:calc(var(--ax) + var(--area) * .76);width:calc(var(--area) * .24)}
}
/* TAFE sits just right of the employment column, level with its dates */
@media (min-width:721px){
  .vb.cU{left:calc(var(--ax) + var(--area) * .46 + .4rem);width:calc(var(--area) * .25)}
}

/* timeline on the light background */
.tlp .vb,.tlp .slist{color:var(--ink)}
.tlp .vb.kw{--bc:var(--ink)}
.tlp .skey .w,.tlp .slist.spine>div.kw::before{background:var(--ink)}
.tlp .vaxis span i{background:var(--ink);box-shadow:0 0 0 3px var(--paper)}
.tlp .slist,.tlp .slist>div{border-color:#d4ccbb}
.tlp .slist.spine>div::before{box-shadow:0 0 0 4px var(--paper)}
.tlp{--pink:#F5367A}

/* Pannier epub player */
.frame.ifr.epub{background:#F1ECE2;aspect-ratio:3/4;width:min(100%,620px);margin:0 auto;overflow:hidden}
.epub-open{position:absolute;inset:0;width:100%;height:100%;border:0;padding:0;background:#101010;cursor:pointer;display:block}
.epub-open img{width:100%;height:100%;object-fit:cover;display:block}
.epub-open .btn{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);white-space:nowrap}
.epub-open:hover .btn,.epub-open:focus-visible .btn{transform:translate(-50%,-50%) scale(1.05)}
.epub-open:focus-visible{outline:3px solid var(--pink);outline-offset:-6px}
@media (max-width:760px){.frame.ifr.epub{aspect-ratio:3/4.4}}
@media (max-width:820px){.foot .st.smileyimg{width:56px!important;height:auto;left:5%;right:auto!important;bottom:-4.6rem}}

/* ---- hero arm: arm stays put, torch sticker sits on it and still peels/moves ---- */
.armrig{position:absolute;right:-4%;bottom:-3.5rem;width:min(62vh,38rem);aspect-ratio:932/1362;pointer-events:none}
.armrig .arm{display:block;width:100%;height:auto;position:relative;z-index:1}
.armrig .st.torch.hero-torch{pointer-events:auto;position:absolute;left:33.05%!important;top:14.1%!important;right:auto!important;bottom:auto!important;width:32.19%!important;z-index:4}
@media (max-width:820px){.armrig{right:-6%;bottom:-2rem;width:min(78vw,340px)}}
.award .shelf-art.top-align{height:174px;object-fit:contain;object-position:center top}
.tkg{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2.2rem 2.4rem;margin-top:1.4rem}
.tk{border-top:2px solid var(--pink);padding-top:.7rem;min-width:0}
.tk h3{font-size:1rem;letter-spacing:.04em;text-transform:uppercase;margin:0 0 .6rem;color:var(--pink)}
.tk .frame,.tk-trio .frame{display:block;border:2px solid rgba(241,236,226,.28);border-radius:10px;overflow:hidden;background:#fff}
.tk .frame{margin-bottom:.8rem}
.tk .frame img,.tk .frame video{display:block;width:100%;height:auto}
.tk-trio{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:1rem;align-items:start;margin-top:1.2rem}
.tk-trio img{display:block;width:100%;height:auto}
.tk-cap{margin-top:1rem}
@media (max-width:820px){.tkg{grid-template-columns:1fr}.tk-trio{grid-template-columns:1fr}}
.tk-hint{margin:.2rem 0 0;font-size:.9rem;opacity:.8}
.tk .frame{cursor:zoom-in;position:relative}
.tk .frame:focus-visible{outline:3px solid var(--pink);outline-offset:3px}
.tk .frame::after{content:"Enlarge";position:absolute;right:.6rem;bottom:.6rem;background:rgba(18,18,18,.82);color:#F1ECE2;font-size:.75rem;padding:.25rem .6rem;border-radius:99px;opacity:0;transition:opacity .15s}
.tk .frame:hover::after,.tk .frame:focus-visible::after{opacity:1}
.tk.wide{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);gap:2rem;align-items:start;margin-top:2.4rem}
.tk.wide .tk-text{grid-column:1}
.tk.wide .frame{grid-column:2;grid-row:1;margin:0}
.tk.wide h3{margin-bottom:.6rem}
.tk.wide p+p{margin-top:.8rem}
.tk-zoom{border:0;padding:0;background:transparent;max-width:min(96vw,1300px);width:96vw;overflow:visible}
.tk-zoom::backdrop{background:rgba(18,18,18,.88)}
.tk-zoom-body video{display:block;width:100%;max-height:86vh;border-radius:10px;background:#000;object-fit:contain}
.tk-zoom-x{display:block;margin:0 0 .6rem auto;background:#F1ECE2;color:#121212;border:0;border-radius:99px;padding:.4rem 1rem;font:inherit;font-weight:600;cursor:pointer}
@media (max-width:820px){.tk.wide{grid-template-columns:1fr}.tk.wide .tk-text,.tk.wide .frame{grid-column:1;grid-row:auto}}
@media (hover:none){.tk .frame::after{opacity:1}}