/* ipassas theme: base tokens, header, footer and shared components (from prototype D). */

@font-face{font-family:"Passas";src:url(../fonts/neue-machina-regular.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}

/* Layout: a declassified file, one straight column of type and black bars.
   Type and black bars are the whole design; images only surface when you ask for them. */
:root{
  --ink:#000;
  --paper:#FFFAFA;
  --blue:#0047FF;
  --rule:2px;
  --f:"Passas","Helvetica Neue",Arial,sans-serif;
  --gut:max(16px,env(safe-area-inset-left,0px));
  --gutR:max(16px,env(safe-area-inset-right,0px));
  color-scheme:light;
}
:root.inv{--ink:#FFFAFA;--paper:#000;color-scheme:dark}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--paper);color:var(--ink);font-family:var(--f);font-size:16px;line-height:1.45;overflow-x:hidden;-webkit-font-smoothing:antialiased;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
img{max-width:100%;display:block}
h1,h2,h3{font-weight:400;font-size:inherit}
:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
::selection{background:var(--blue);color:#FFFAFA}
.cap{font-size:12px;letter-spacing:.09em;text-transform:uppercase}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- top bar: logo + name, plain words, current section blacked out ---------- */
.bar{position:sticky;top:0;z-index:50;height:60px;background:var(--paper);display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:24px;padding-left:var(--gut);padding-right:var(--gutR)}
.logo{display:flex;align-items:center;gap:12px;height:100%}
.mark{height:26px;width:auto;fill:currentColor;display:block}
.wm{font-size:17px;letter-spacing:-.01em;white-space:nowrap}
.logo:hover .mark{fill:var(--blue)}
.menu{display:flex;align-items:center;gap:2px;overflow-x:auto;scrollbar-width:none}
.menu::-webkit-scrollbar{display:none}
.menu a{font-size:17px;line-height:1;padding:6px 8px 5px;white-space:nowrap}
.menu a:hover{background:var(--blue);color:#FFFAFA}
.menu a.cur{background:var(--ink);color:var(--paper)}
.inv-btn{display:flex;align-items:center;gap:8px;height:100%}
.inv-btn{justify-content:flex-end}
.inv-btn .sq{position:relative;width:22px;height:22px;border:2px solid var(--ink)}
.inv-btn .sq::after{content:"";position:absolute;top:0;bottom:0;left:0;width:50%;background:var(--ink)}
.inv-btn:hover .sq{border-color:var(--blue)}
.inv-btn:hover .sq::after{background:var(--blue)}
.inv-btn .lbl{display:none}
/* burger: on only when the menu no longer fits beside the cart (base.js sets .is-burger) */
.burger{display:flex;flex-direction:column;justify-content:center;gap:5px;width:40px;height:40px;padding:0 8px;background:none;border:0;cursor:pointer;color:inherit}
.burger[hidden]{display:none}
.burger span{display:block;height:2px;background:currentColor}
.burger:hover{color:var(--blue)}
.bar.is-burger.open .burger span:nth-child(2){opacity:0}
.bar.is-burger.open .burger span:first-child{transform:translateY(7px) rotate(45deg)}
.bar.is-burger.open .burger span:last-child{transform:translateY(-7px) rotate(-45deg)}
.bar.is-burger .menu{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;overflow:visible;background:var(--paper);border-top:2px solid var(--ink);border-bottom:2px solid var(--ink);padding:6px var(--gutR) 18px var(--gut);max-height:calc(100dvh - 54px);overflow-y:auto}
.bar.is-burger.open .menu{display:flex}
.bar.is-burger .menu a{font-size:clamp(28px,8vw,44px);line-height:1.1;letter-spacing:-.02em;padding:12px 0 10px;border-bottom:1px solid var(--ink)}
.bar.is-burger .menu a.cur{padding-left:10px}
.bar.is-burger .menu .inv-btn{justify-content:flex-start;gap:12px;height:auto;padding:18px 0 4px;font-size:17px;background:none;border:0;color:inherit;cursor:pointer}
.bar.is-burger .menu .inv-btn .lbl{display:inline}

/* ---------- document frame ---------- */
main{position:relative;z-index:1}
.sec{display:block;padding:56px var(--gutR) 60px var(--gut)}
.sec.first{border-top:0;padding-top:26px}
.margin{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.body{min-width:0;display:flex;flex-direction:column;gap:26px}
.stamp{display:inline-block;border:2px solid var(--blue);color:var(--blue);padding:5px 8px 3px;font-size:12px;letter-spacing:.11em;text-transform:uppercase;line-height:1.2;white-space:nowrap}
.stamp.k{border-color:var(--ink);color:var(--ink)}
.stamp.solid{background:var(--blue);color:#FFFAFA}
h1.hd,h2.hd{font-size:clamp(44px,8vw,140px);line-height:.84;letter-spacing:-.045em}
.strike{height:18px;background:var(--ink);pointer-events:none}
.note-line{max-width:62ch}

/* ---------- hero: the sentence is the menu ---------- */
.intro{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:16px 40px;border-top:1px solid var(--ink);padding-top:14px;font-size:clamp(18px,1.8vw,26px);line-height:1.2}
.intro .cap{display:block;margin-bottom:6px;font-size:12px;line-height:1.45}
.say{font-size:clamp(34px,7.4vw,138px);line-height:1.2;letter-spacing:-.035em}
.say a,.say .w{transition:background-color .05s linear,color .05s linear}
.say a{background:var(--blue);color:#FFFAFA;padding:0 .08em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.say.red .w,.say.red a:not(.lit){background:var(--ink);color:transparent}
.say.red a.lit{background:var(--blue);color:#FFFAFA}

/* ---------- subject sheet ---------- */
.sheet{display:grid;grid-template-columns:minmax(120px,190px) minmax(0,1fr);border-top:1px solid var(--ink)}
.sheet dt,.sheet dd{padding:12px 0;border-bottom:1px solid var(--ink)}
.sheet dt{padding-right:16px}
.sheet dd{font-size:clamp(18px,1.8vw,26px);line-height:1.2}
.bar-inline{display:inline-block;background:var(--ink);color:transparent;user-select:none;cursor:help}
.bar-inline:hover,.bar-inline:focus-visible,.bar-inline.on{background:transparent;color:inherit;outline:1px dashed var(--ink)}

/* ---------- run-in lists (work, typefaces, associates) ---------- */
.runin{font-size:clamp(26px,3.7vw,62px);line-height:1.12;letter-spacing:-.025em}
.runin .sep{opacity:.35;padding-inline:.16em}
.runin a{-webkit-box-decoration-break:clone;box-decoration-break:clone}
.runin.red a:not(.lit),.runin.red .sep{background:var(--ink);color:transparent;opacity:1}
.runin a,.runin .sep{transition:background-color .05s linear,color .05s linear}
.work .runin a.lit{background:var(--paper);color:var(--ink);padding:0 .08em}
.tf a{display:inline}
.tf a.lit{background:var(--paper);color:var(--ink);padding:0 .08em}
.runin.small{font-size:clamp(20px,2.4vw,36px)}

.peek{position:fixed;left:0;top:0;z-index:40;width:min(30vw,380px);pointer-events:none;opacity:0;will-change:transform}
.peek img{display:block;width:100%;height:auto}
.peek.on{opacity:1}

/* ---------- typefaces: one at a time, set in itself ---------- */
.tfs{background:var(--ink);color:var(--paper)}
.tf-txt{font-size:clamp(20px,2.2vw,32px);line-height:1.2;max-width:30ch}
.tf-btn{align-self:flex-start;background:var(--paper);color:var(--ink);font-size:17px;line-height:1;padding:11px 14px 10px}
.tf-btn:hover,.tf-btn:focus-visible{background:var(--blue);color:#FFFAFA}

/* ---------- products ---------- */
.ops{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));border-top:1px solid var(--ink)}
.ops a,.ops .op{padding:12px 16px 16px 0;border-bottom:1px solid var(--ink);display:flex;flex-direction:column;gap:4px;min-width:0}
.ops b{font-weight:400;font-size:24px;line-height:1}
.ops a:hover b{background:var(--ink);color:var(--paper);align-self:flex-start}

/* ---------- notes: partly redacted titles ---------- */
.notes ol{list-style:none;border-top:1px solid var(--ink)}
.notes li a{display:grid;grid-template-columns:120px minmax(0,1fr);gap:16px;padding:16px 0 18px;border-bottom:1px solid var(--ink);align-items:baseline}
.notes h3{font-size:clamp(22px,2.8vw,44px);line-height:1.06;letter-spacing:-.02em}
.notes h3 .x{background:var(--ink);color:transparent;transition:background-color .05s,color .05s}
.notes li a:hover .x,.notes li a:focus-visible .x,.notes li a.open .x{background:transparent;color:inherit}
.notes li a:hover h3,.notes li a:focus-visible h3,.notes li a.open h3{color:var(--blue)}

/* ---------- tools: a short grid of four, the rest live on the tools page ---------- */
.tgrid{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 24px}
.tgrid a{display:flex;flex-direction:column;gap:10px;height:100%;padding:14px 12px 18px;border-top:1px solid var(--ink)}
.tgrid b{font-weight:400;font-size:clamp(22px,2.2vw,32px);line-height:1.05;letter-spacing:-.015em}
.tgrid .k{align-self:flex-start;background:var(--ink);color:var(--paper);padding:3px 6px 2px}
.tgrid .d{font-size:15px;max-width:30ch}
.tgrid .go{margin-top:auto;font-size:15px;text-decoration:underline;text-underline-offset:3px}
.tgrid a:hover,.tgrid a:focus-visible{background:var(--blue);color:#FFFAFA;border-color:var(--blue)}
.tgrid a:hover .k,.tgrid a:focus-visible .k{background:#FFFAFA;color:var(--blue)}
.all-btn{align-self:flex-start;background:var(--ink);color:var(--paper);font-size:17px;line-height:1;padding:11px 14px 10px}
.all-btn:hover,.all-btn:focus-visible{background:var(--blue);color:#FFFAFA}
@media (max-width:1000px){.tgrid{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:16px}}
@media (max-width:560px){.tgrid{grid-template-columns:1fr}}

/* ---------- shots: a one-screen playground ---------- */
.sec.shots{padding-bottom:0}
.play{position:relative;height:calc(100svh - 60px);min-height:520px;margin:28px calc(var(--gutR) * -1) 0 calc(var(--gut) * -1);background:var(--ink);overflow:hidden;touch-action:pan-y}
.pc{position:absolute;left:0;top:0;background:var(--blue);cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;will-change:transform}
.pc img{display:block;width:100%;height:100%;object-fit:fill;filter:grayscale(1) contrast(1.3);mix-blend-mode:multiply;pointer-events:none;-webkit-user-drag:none}
.pc:hover img,.pc.held img,.pc:focus-visible img{filter:none;mix-blend-mode:normal}
.pc.held{cursor:grabbing}
.pc .grip{position:absolute;right:0;bottom:0;width:22px;height:22px;background:#FFFAFA;border:2px solid var(--blue);cursor:nwse-resize;touch-action:none}
@media (hover:hover){.pc .grip{opacity:0}.pc:hover .grip,.pc.held .grip,.pc:focus-visible .grip{opacity:1}}
.again{position:absolute;top:14px;right:var(--gutR);z-index:5;background:#FFFAFA;color:#000;border:2px solid #FFFAFA;padding:8px 12px}
.again:hover{background:var(--blue);border-color:var(--blue);color:#FFFAFA}

/* ---------- contact ---------- */
.mail{display:block;text-align:left;font-size:clamp(30px,8.2vw,160px);line-height:.92;letter-spacing:-.05em;overflow-wrap:anywhere;width:100%}
.mail:hover{background:var(--blue);color:#FFFAFA}
.mail .ok{background:var(--ink);color:var(--paper)}
.cgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:20px;border-top:var(--rule) solid var(--ink);padding-top:16px}
.cgrid .cap{display:block;margin-bottom:8px}
.cgrid a{display:block;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.cgrid a:hover{background:var(--ink);color:var(--paper);text-decoration:none}
.cgrid address{font-style:normal}
.stack{display:flex;flex-direction:column;gap:18px}
.rline{display:flex;gap:8px 16px;flex-wrap:wrap;align-items:baseline;border-top:1px solid var(--ink);padding-top:12px}
.rline a{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.rline a:hover{background:var(--blue);color:#FFFAFA;text-decoration:none}
.trust{display:flex;flex-direction:column;gap:10px;border-top:1px solid var(--ink);padding-top:14px}
.fash{max-width:62ch}

/* ---------- review switcher (not part of the site) ---------- */
.sw{position:fixed;left:max(12px,env(safe-area-inset-left,0px));bottom:calc(12px + env(safe-area-inset-bottom,0px));z-index:80;display:flex;align-items:stretch;background:var(--ink);color:var(--paper);border:var(--rule) solid var(--ink);max-width:calc(100% - 24px)}
.sw > span{padding:0 10px;display:flex;align-items:center}
.sw a{min-width:36px;min-height:36px;display:flex;align-items:center;justify-content:center;border-left:1px solid var(--paper)}
.sw a[aria-current="page"]{background:var(--blue);color:#FFFAFA}
.sw a:hover{background:var(--paper);color:var(--ink)}
.sw .swd{font-size:12px;line-height:1.3;max-width:36ch;border-left:1px solid var(--paper);padding:5px 10px}

@media (max-width:820px){
  .sec{padding-top:30px;padding-bottom:40px}
  .margin{flex-direction:row;flex-wrap:wrap}
  .intro{grid-template-columns:1fr}
  .wm{display:none}
  .bar{gap:12px;height:54px}
  .menu a{font-size:15px;padding:6px 6px 5px}
  .pc .grip{width:30px;height:30px}
  .notes li a{grid-template-columns:1fr;gap:6px}
  .sw .swd{display:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important}
  html{scroll-behavior:auto}
}
/* ---------- word filters: clear air between words ---------- */
.filt{display:flex;flex-wrap:wrap;gap:10px 18px;margin-left:-10px}
.filt button{font-size:17px;line-height:1;padding:6px 10px 5px}
.filt button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.filt button:hover{background:var(--blue);color:#FFFAFA}