/* Tallest Giant — tallestgiant.com */

@font-face{font-family:'Familjen Grotesk';font-style:normal;font-weight:400 700;
  font-display:swap;src:url(../fonts/FamiljenGrotesk.woff2) format('woff2')}
@font-face{font-family:'Familjen Grotesk';font-style:italic;font-weight:400 700;
  font-display:swap;src:url(../fonts/FamiljenGrotesk-italic.woff2) format('woff2')}
@font-face{font-family:'Martian Mono';font-style:normal;font-weight:100 800;
  font-display:swap;src:url(../fonts/MartianMono.woff2) format('woff2')}

@property --sweep{syntax:'<percentage>';inherits:false;initial-value:0%}

*,*::before,*::after{box-sizing:border-box}
:focus-visible{outline:2px solid #FF3E8F;outline-offset:3px}

#press{
  --pink:#FF3E8F;--yellow:#FFC90A;
  --ground:#0E1226;--surface:#161C38;--fg:#EDEAE0;--dim:#8E93B5;
  --blue:#6E86FF;--rule:rgba(237,234,224,.2);--edge:var(--blue);
  --grain-blend:overlay;--grain-op:.3;
  margin:0;background:var(--ground);color:var(--fg);
  font-family:'Familjen Grotesk',system-ui,sans-serif;
  font-size:17px;line-height:1.6;position:relative;overflow-x:clip;
  transition:background .5s ease,color .5s ease;min-height:100vh}
#press[data-mode="light"]{
  --ground:#E7E4DA;--surface:#DFDBCE;--fg:#141A46;--dim:#5C6180;
  --blue:#1B33C4;--rule:rgba(20,26,70,.2);
  --grain-blend:multiply;--grain-op:.42}

#press .wrap{max-width:1340px;margin:0 auto;padding:0 40px;position:relative;z-index:3}
#press .mono{font-family:'Martian Mono',monospace;font-size:9px;letter-spacing:.19em;
  text-transform:uppercase;color:var(--dim)}
#press h1,#press h2,#press h3{font-family:'Familjen Grotesk',system-ui,sans-serif;font-weight:700;
  letter-spacing:-.035em;line-height:1.02;margin:0;text-wrap:balance}
#press p{text-wrap:pretty}
#press a{color:inherit}

#press .grain{position:fixed;inset:-60px;z-index:1;pointer-events:none;
  opacity:var(--grain-op);mix-blend-mode:var(--grain-blend);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.4'/%3E%3C/svg%3E");
  animation:pGrain 1.1s steps(3,end) infinite}
@keyframes pGrain{0%{transform:translate(0,0)}33%{transform:translate(-6px,4px)}
  66%{transform:translate(4px,-5px)}100%{transform:translate(0,0)}}

/* print reveal */
#press .pr{position:relative;clip-path:inset(-.55em -.6em 100% -.6em);
  animation:prLay .85s var(--d,0s) cubic-bezier(.32,0,.12,1) forwards}
@keyframes prLay{to{clip-path:inset(-.55em -.6em -.45em -.6em)}}
#press .pr::after{content:'';position:absolute;left:-1.5%;right:-1.5%;top:var(--sweep,0%);
  height:2px;background:var(--edge);opacity:0;pointer-events:none;z-index:6;
  animation:prEdge .85s var(--d,0s) cubic-bezier(.32,0,.12,1) forwards}
@keyframes prEdge{0%{--sweep:0%;opacity:.75}88%{opacity:.75}100%{--sweep:100%;opacity:0}}
@supports (animation-timeline:view()){
  #press .prs{position:relative;clip-path:inset(-.55em -.6em 100% -.6em);
    animation:prLay linear both;animation-timeline:view();animation-range:entry 2% entry 40%}
  #press .prs::after{content:'';position:absolute;left:-1.5%;right:-1.5%;top:var(--sweep,0%);
    height:2px;background:var(--edge);opacity:0;pointer-events:none;z-index:6;
    animation:prEdge linear both;animation-timeline:view();animation-range:entry 2% entry 40%}
}

/* cursor ring */
#press .ring{position:fixed;left:0;top:0;width:0;height:0;pointer-events:none;z-index:60;
  transform:translate3d(-100px,-100px,0);will-change:transform}
#press .ring i{position:absolute;left:-17px;top:-17px;width:34px;height:34px;display:block;
  border-radius:50%;border:1.5px solid var(--blue);will-change:transform;
  transition:transform .28s cubic-bezier(.2,.9,.3,1),background .28s ease,
             border-color .28s ease,opacity .3s ease}
#press.hot .ring i{transform:scale(2.18);border-color:var(--pink);
  background:color-mix(in srgb,var(--pink) 22%,transparent)}
@media (pointer:coarse){#press .ring{display:none}}

/* nav */
#press .nav{position:relative;z-index:7;display:flex;justify-content:space-between;
  align-items:flex-end;max-width:1340px;margin:0 auto;padding:28px 40px 14px;
  border-bottom:1px solid var(--rule)}
#press .nav__mk{width:126px;aspect-ratio:2.37;background:var(--fg);display:block;
  -webkit-mask:url(../img/word-mask.png) left center/contain no-repeat;
  mask:url(../img/word-mask.png) left center/contain no-repeat;transition:background .5s ease}
#press .nav nav{display:flex;gap:28px;align-items:center;padding-bottom:3px;
  flex-wrap:wrap;justify-content:flex-end;row-gap:8px}
#press .nav a{text-decoration:none;font-size:14px;position:relative;padding-bottom:2px;
  white-space:nowrap}
#press .nav a::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--pink);transform:scaleX(0);transform-origin:right;
  transition:transform .34s cubic-bezier(.2,.9,.3,1)}
#press .nav a:hover::after{transform:scaleX(1);transform-origin:left}
#press .nav a[aria-current="page"]{color:var(--pink)}
#press .nav a[aria-current="page"]::after{transform:scaleX(1);background:var(--pink)}
#press .burger{display:none;appearance:none;background:none;cursor:pointer;
  border:1px solid var(--rule);width:42px;height:38px;padding:10px 11px;
  flex-direction:column;justify-content:space-between;margin-bottom:-2px}
#press .burger i{display:block;height:2px;background:var(--fg);transition:transform .25s,opacity .2s}
#press .nav[data-open] .burger i:nth-child(1){transform:translateY(7px) rotate(45deg)}
#press .nav[data-open] .burger i:nth-child(2){opacity:0}
#press .nav[data-open] .burger i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
#press .nav .mode{appearance:none;cursor:pointer;background:none;color:var(--dim);
  border:1px solid var(--rule);font-family:'Martian Mono',monospace;font-size:9px;
  letter-spacing:.1em;text-transform:uppercase;padding:7px 11px;transition:.16s;
  margin-bottom:-2px}
#press .nav .mode:hover{color:var(--fg);border-color:var(--fg)}

/* ── home: the pen ── */
#press .pen{position:relative;height:min(88vh,900px);min-height:560px}
#press .pen__stage{position:absolute;inset:0 0 -140px;z-index:6;pointer-events:none}
#press #ink{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
#press .pen .wrap{pointer-events:none;position:relative;z-index:3;height:100%;
  display:flex;flex-direction:column;justify-content:center}
#press .pen .wrap a,#press .pen .wrap button{pointer-events:auto}
#press .htxt{width:fit-content}
#press .pen h1{font-size:clamp(33px,5.4vw,78px);letter-spacing:-.045em;line-height:.96}
#press .pen h1 .ln{display:block;white-space:nowrap}
#press .pen h1 .b{color:var(--blue)}
#press .lede{font-size:18px;line-height:1.55;max-width:34ch;margin:24px 0 0;color:var(--fg)}
#press .sig{margin-top:26px;display:flex;gap:22px;align-items:center;flex-wrap:wrap}
#press .sig a{font-size:15.5px;text-decoration:none;font-weight:600;position:relative;
  padding-bottom:5px;color:var(--blue)}
#press .sig a::after{content:'';position:absolute;left:0;right:0;bottom:0;height:2px;
  background:var(--pink);transform:scaleX(0);transform-origin:left;
  transition:transform .34s cubic-bezier(.2,.9,.3,1)}
#press .sig a:hover::after{transform:scaleX(1)}

/* home shortcuts */
#press .now{border-top:1px solid var(--rule);padding:20px 0 34px;display:flex;gap:14px 26px;
  flex-wrap:wrap;align-items:baseline}
#press .now a{text-decoration:none;font-weight:600;font-size:15.5px;color:var(--blue)}
#press .now a:hover{color:var(--pink)}

/* ── work ── */
#press .phead{padding:44px 0 6px}
#press .phead h1{font-size:clamp(30px,4.4vw,54px)}
#press .phead p{margin:12px 0 0;color:var(--dim);max-width:52ch;font-size:16px}
#press .grp{padding:22px 0 8px;position:relative;z-index:3}
#press .grp__h{display:flex;justify-content:space-between;align-items:baseline;gap:22px;
  flex-wrap:wrap;padding-bottom:12px;margin-bottom:26px;border-bottom:1px solid var(--rule)}
#press .grp__h h2{font-size:clamp(22px,2.7vw,32px)}
#press .shelf{display:grid;grid-template-columns:repeat(2,1fr);gap:34px;margin-bottom:52px}
#press .shelf--wide{grid-template-columns:1fr}
#press .tile{--tg:#1B33C4;--ta:#E7E4DA;--ta2:#FFC90A;--cap:#0B1233;--hb:screen;
  display:flex;flex-direction:column;text-decoration:none;color:inherit;position:relative;
  will-change:transform}
#press .tile__art{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--tg)}
#press .tile--wide .tile__art{aspect-ratio:21/9}
#press .tile__art::after{content:'';position:absolute;inset:0;pointer-events:none;z-index:4;
  background-image:radial-gradient(var(--tg) 32%,transparent 33%);background-size:4.4px 4.4px;
  opacity:.42;mix-blend-mode:var(--hb)}
#press .track{position:absolute;inset:0;display:flex;width:300%;
  animation:pCyc 13.5s infinite;animation-play-state:paused}
#press .tile:hover .track,#press .tile:focus-visible .track{animation-play-state:running}
@keyframes pCyc{0%,28%{transform:translateX(0)}33.4%,61.4%{transform:translateX(-33.3333%)}
  66.7%,94.7%{transform:translateX(-66.6666%)}100%{transform:translateX(0)}}
#press .fr{width:33.3333%;flex:none;position:relative}
#press .fr svg{position:absolute;left:0;right:0;top:15%;width:66%;max-width:430px;
  margin-inline:auto;height:auto;fill:none;stroke:var(--ta);stroke-width:1.5}
#press .tile--wide .fr svg{top:13%;max-width:400px}
#press .fr svg *{vector-effect:non-scaling-stroke}
#press .fr .f{fill:var(--ta2);stroke:none}
#press .fr__cap{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:14px 18px;
  background:linear-gradient(transparent,var(--cap) 52%)}
#press .fr__cap b{display:block;font-family:'Martian Mono',monospace;font-size:8px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ta);opacity:.7;margin-bottom:5px}
#press .fr__cap span{display:block;font-size:14.5px;line-height:1.4;color:var(--ta);
  font-weight:500}
#press .bars{position:absolute;left:18px;right:18px;top:14px;z-index:5;display:flex;gap:5px}
#press .bars i{flex:1;height:2px;position:relative;overflow:hidden;
  background:color-mix(in srgb,var(--ta) 30%,transparent)}
#press .bars i::after{content:'';position:absolute;inset:0;background:var(--ta);
  transform:scaleX(0);transform-origin:left;animation:pBar 13.5s infinite;
  animation-play-state:paused}
#press .tile:hover .bars i::after,#press .tile:focus-visible .bars i::after{
  animation-play-state:running}
#press .bars i:nth-child(2)::after{animation-delay:4.5s}
#press .bars i:nth-child(3)::after{animation-delay:9s}
@keyframes pBar{0%{transform:scaleX(0)}28%,33%{transform:scaleX(1)}34%,100%{transform:scaleX(0)}}
#press .soon{position:absolute;right:18px;top:30px;z-index:5;
  font-family:'Martian Mono',monospace;font-size:8.5px;letter-spacing:.16em;
  text-transform:uppercase;background:var(--yellow);color:#141A46;padding:6px 10px;
  font-weight:600}
#press .tile--soon .tile__art{opacity:.86}
#press .tile__body{padding:18px 0 0;display:grid;gap:9px}
#press .tile__top{display:flex;justify-content:space-between;align-items:baseline;gap:16px}
#press .tile h3{font-size:26px;transition:color .25s}
#press .tile:hover h3{color:var(--pink)}
#press .tile p{margin:0;font-size:15px;line-height:1.5;color:var(--dim);max-width:44ch}
#press .tile__foot{display:flex;justify-content:space-between;align-items:center;gap:16px;
  flex-wrap:wrap;padding-top:4px}
#press .chips{display:flex;gap:6px;flex-wrap:wrap}
#press .chip{font-family:'Martian Mono',monospace;font-size:8px;letter-spacing:.13em;
  text-transform:uppercase;border:1px solid var(--rule);padding:4px 7px;color:var(--dim)}
#press .cta{font-size:14px;font-weight:700;color:var(--blue);border-bottom:2px solid var(--pink);
  padding-bottom:1px;white-space:nowrap}
#press .tile:hover .cta{color:var(--pink)}

/* ── blog ── */
#press .bgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:26px}
#press .bcard{border:1px solid var(--rule);padding:0 22px 24px;display:grid;gap:11px;
  align-content:start;text-decoration:none;color:inherit;position:relative;
  transition:background .25s,transform .3s cubic-bezier(.2,.85,.3,1)}
#press .bcard i{display:block;height:4px;background:var(--bc,var(--pink));
  margin:0 -22px 10px}
#press a.bcard:hover{background:var(--surface);transform:translateY(-4px)}
#press .bcard time{font-family:'Martian Mono',monospace;font-size:8.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--dim)}
#press .bcard h3{font-size:21px;line-height:1.15;transition:color .25s}
#press a.bcard:hover h3{color:var(--pink)}
#press .bcard p{margin:0;font-size:14.5px;line-height:1.55;color:var(--dim)}
#press .bcard .bmore{font-size:14px;font-weight:700;color:var(--blue);margin-top:4px}
#press a.bcard:hover .bmore{color:var(--pink)}
#press .bnote{margin-top:22px}

/* ── support ── */
#press .help__lead{margin:14px 0 26px;font-size:16.5px;max-width:52ch;color:var(--dim)}
#press .ticket{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;max-width:760px}
#press .f{display:grid;gap:7px;grid-column:1/-1}
#press .f--half{grid-column:auto}
#press .f span{font-family:'Martian Mono',monospace;font-size:8.5px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--dim)}
#press .f input,#press .f select,#press .f textarea{background:transparent;color:var(--fg);
  border:1px solid var(--rule);padding:11px 12px;font-family:inherit;font-size:15px;
  border-radius:0;outline:none;transition:border-color .2s;width:100%}
#press .f textarea{resize:vertical;min-height:110px;line-height:1.5}
#press .f select{appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),
                   linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:36px}
#press .f input:focus,#press .f select:focus,#press .f textarea:focus{border-color:var(--pink)}
#press .ticket__foot{grid-column:1/-1;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
#press .ticket button{appearance:none;cursor:pointer;border:0;background:var(--pink);
  color:#12142B;font-family:inherit;font-weight:700;font-size:15px;padding:13px 24px;
  transition:transform .16s}
#press .ticket button:hover{transform:translateY(-2px)}
#press .ticket__foot .mono{color:var(--dim)}

/* ── contact ── */
#press .end{border-top:1px solid var(--rule);margin-top:40px;padding:40px 0 20px}
#press .end h2{font-size:clamp(26px,3.8vw,50px);color:var(--blue);max-width:15ch;
  margin-bottom:20px}
#press .end .mail{font-size:19px;text-decoration:none;border-bottom:2px solid var(--pink);
  padding-bottom:3px}
#press .end .mail:hover{color:var(--pink)}
#press .end .note{display:block;margin-top:14px;color:var(--dim);font-size:15px}

/* ── ghost feature images ── */
#press .bcard .bimg{display:block;width:calc(100% + 44px);margin:0 -22px 6px;
  aspect-ratio:16/9;object-fit:cover}
#press .postgrid{display:grid;grid-template-columns:minmax(0,70ch) minmax(0,1fr);
  gap:16px 54px;align-items:start;margin-top:10px}
#press .pside{margin:0;position:sticky;top:36px}
#press .pfeat{display:block;width:100%;height:auto}

/* ── ghost post prose ── */
#press .prose{max-width:70ch;font-size:16.5px;line-height:1.7}
#press .prose h2{font-size:24px;margin:38px 0 12px}
#press .prose h3{font-size:19px;margin:30px 0 10px}
#press .prose p{margin:0 0 16px}
#press .prose a{color:var(--blue)}
#press .prose a:hover{color:var(--pink)}
#press .prose img{max-width:100%;height:auto;display:block;margin:22px 0}
#press .prose pre{background:var(--surface);padding:16px;overflow-x:auto;
  font-size:13px;line-height:1.6;margin:0 0 16px}
#press .prose code{font-family:'Martian Mono',monospace;font-size:.82em}
#press .prose blockquote{margin:0 0 16px;padding:2px 0 2px 18px;
  border-left:3px solid var(--pink);color:var(--dim)}
#press .prose hr{border:0;border-top:1px solid var(--rule);margin:34px 0}
#press .prose ul,#press .prose ol{margin:0 0 16px;padding-left:24px}
#press .prose figcaption{font-family:'Martian Mono',monospace;font-size:9px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin-top:-12px;
  margin-bottom:20px}

/* ── legal ── */
#press .legal{max-width:820px;margin-inline:0;padding-bottom:20px}
#press .legal .phead p{color:var(--dim)}
#press .legal h2{font-size:21px;margin:36px 0 10px}
#press .legal p{margin:0 0 14px;font-size:15.5px;line-height:1.66;color:var(--fg);max-width:70ch}
#press .legal a{color:var(--blue)}
#press .legal a:hover{color:var(--pink)}

/* ── 404 ── */
#press .lost{padding:60px 0 20px;display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:44px;align-items:center}
#press .lost h1{font-size:clamp(34px,5vw,72px)}
#press .lost p{color:var(--dim);font-size:16.5px;max-width:40ch}
#press .lost img{display:block;max-width:min(100%,330px);height:auto;margin-inline:auto}
#press .lost img.dk{display:block}
#press .lost img.lt{display:none}
#press[data-mode="light"] .lost img.dk{display:none}
#press[data-mode="light"] .lost img.lt{display:block}

#press .foot{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  padding:20px 0 44px;border-top:1px solid var(--rule);position:relative;z-index:3;
  margin-top:40px}
#press .foot a{text-decoration:none}
#press .foot a:hover{color:var(--pink)}

@media (max-width:920px){
  #press .pen{height:auto;min-height:0}
  #press .pen__stage{position:relative;height:54vh;min-height:330px;inset:auto;
    margin-bottom:-90px}
  #press .pen .wrap{padding-top:26px;padding-bottom:8px;justify-content:flex-start;height:auto}
  #press .pen h1 .ln{white-space:normal}
  #press .nav{padding:20px 24px 12px}
  #press .nav__mk{width:104px}
  #press .burger{display:flex}
  #press .nav nav{display:none;position:absolute;top:100%;left:0;right:0;z-index:50;
    background:var(--ground);border-bottom:1px solid var(--rule);
    flex-direction:column;align-items:flex-start;gap:0;padding:8px 24px 20px}
  #press .nav[data-open] nav{display:flex}
  #press .nav nav a{padding:12px 0;font-size:16px}
  #press .nav .mode{margin-top:12px}
  #press .wrap{padding:0 24px}
  #press .shelf{grid-template-columns:1fr;gap:28px}
  #press .bgrid{grid-template-columns:1fr}
  #press .studio{grid-template-columns:1fr}
  #press .lost{grid-template-columns:1fr}
  #press .postgrid{grid-template-columns:1fr}
  #press .pside{position:static;order:-1;max-width:520px}
  #press .ticket{grid-template-columns:1fr}
  #press .f--half{grid-column:1/-1}
}
@media (prefers-reduced-motion:reduce){
  #press *,#press *::before,#press *::after{animation-duration:.001ms!important;
    animation-iteration-count:1!important;transition-duration:.001ms!important}
  #press .pr,#press .prs{clip-path:none!important}
  #press .pr::after,#press .prs::after{display:none}
  #press .ring{display:none}
}