/* NovaVantix shared system. One saffron studio, one steel N, one film.
   Read SYSTEM.md before adding to this file. Page styles live in <page>.css. */

/* while Caslon loads, Times is squeezed to the same width, so a headline never jumps */
@font-face{font-family:'Caslon Fallback';src:local('Times New Roman'),local('Times');size-adjust:84%;ascent-override:96%;descent-override:26%}

:root{
  /* the colour script */
  --ink:#15100A; --bone:#F9F3E8;
  --saffron:#FFC117; --marigold:#FF8D08; --floor:#FF9A0C;
  --ruby:#B81A0C; --ruby-deep:#8E1508; --plum:#5E1560; --sapphire:#0A1868; --padpa:#F6AE96; --peach:#FFC597;
  --ink-2:rgba(21,16,10,.72); --bone-2:rgba(249,243,232,.78);
  --rule-ink:rgba(21,16,10,.28); --rule-bone:rgba(249,243,232,.32);

  /* five trades, five hues of the N: top of the wall, then the floor */
  --lagoon:#10B7C4; --lagoon-floor:#0A8E9B;
  --cobalt:#1F49F2; --cobalt-floor:#1636CC;
  --fuchsia:#E5237F; --fuchsia-floor:#C21569;
  --violet:#7A2BEA; --violet-floor:#5A1FC2;
  --ember:#FF6A14; --ember-floor:#EE5208;

  /* amber means one thing: a fact we do not have yet */
  --amber:#FFB000;

  --serif:'Libre Caslon Condensed','Caslon Fallback',serif;
  --sans:'Instrument Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'Fragment Mono',ui-monospace,Menlo,monospace;

  --ease:cubic-bezier(.25,1,.5,1);
  --ease-in-out:cubic-bezier(.65,0,.35,1);
  --vh:1svh;
  --gut:clamp(16px,2.3vw,36px);
  --nav-h:76px;
  --dock-h:0px;

  /* display sizes: Caslon. d1 is a whole screen, d5 a caption */
  --d1:clamp(76px,14.4vw,250px);
  --d2:clamp(56px,9.2vw,156px);
  --d3:clamp(40px,5.6vw,92px);
  --d4:clamp(30px,3.15vw,54px);
  --d5:clamp(23px,2vw,32px);
  --t-body:clamp(16px,1.2vw,18px);
  --t-lede:clamp(17px,1.4vw,21px);
  --t-small:14px;
}
@media (max-width:820px){:root{--nav-h:60px;--dock-h:58px}}

/* the walls. put data-trade on any section and its tokens follow */
[data-trade=villas]{--wall:var(--lagoon);--wall-floor:var(--lagoon-floor);--wall-fg:var(--ink);--wall-fg-2:var(--ink-2);--wall-rule:var(--rule-ink)}
[data-trade=rent-a-car]{--wall:var(--cobalt);--wall-floor:var(--cobalt-floor);--wall-fg:var(--bone);--wall-fg-2:var(--bone-2);--wall-rule:var(--rule-bone)}
[data-trade=weddings]{--wall:var(--fuchsia);--wall-floor:var(--fuchsia-floor);--wall-fg:var(--bone);--wall-fg-2:var(--bone-2);--wall-rule:var(--rule-bone)}
[data-trade=tuition]{--wall:var(--violet);--wall-floor:var(--violet-floor);--wall-fg:var(--bone);--wall-fg-2:var(--bone-2);--wall-rule:var(--rule-bone)}
[data-trade=solar]{--wall:var(--ember);--wall-floor:var(--ember-floor);--wall-fg:var(--ink);--wall-fg-2:var(--ink-2);--wall-rule:var(--rule-ink)}

/* reset */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{background:var(--saffron);-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:var(--nav-h)}
body{font-family:var(--sans);font-size:var(--t-body);line-height:1.5;color:var(--ink);background:var(--saffron);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:clip;font-feature-settings:'kern','liga'}
img,svg,picture,canvas{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit;background:none;border:0;border-radius:0}
button{cursor:pointer}
ol,ul{list-style:none}
h1,h2,h3,h4{font-family:var(--serif);font-weight:400;letter-spacing:-.016em;line-height:1.02;text-wrap:balance}
p{text-wrap:pretty}
b,strong{font-weight:600}
:focus{outline:0}
:focus-visible{outline:2px solid currentColor;outline-offset:3px}
::selection{background:var(--ink);color:var(--saffron)}
.nv-skip{position:fixed;left:-999px;top:0;z-index:99;background:var(--ink);color:var(--bone);padding:13px 18px}
.nv-skip:focus{left:8px;top:8px}
.nv-vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* type. letters never collide: 1.02 is the floor for two or more lines of Caslon */
.nv-d1,.nv-d2,.nv-d3,.nv-d4,.nv-d5{font-family:var(--serif);font-weight:400;letter-spacing:-.016em;line-height:1.02}
.nv-d1{font-size:var(--d1)}.nv-d2{font-size:var(--d2)}.nv-d3{font-size:var(--d3)}.nv-d4{font-size:var(--d4);letter-spacing:-.012em;line-height:1.06}.nv-d5{font-size:var(--d5);letter-spacing:-.01em;line-height:1.12}
.nv-lede{font-size:var(--t-lede);line-height:1.42;letter-spacing:-.006em}
.nv-small{font-size:var(--t-small);line-height:1.42}
.nv-label{font-family:var(--mono);font-size:12px;line-height:1.35;letter-spacing:.01em}
.nv-it{font-family:var(--serif);font-style:italic}
.nv-heavy{font-weight:700}

/* layout */
.nv-wrap{padding-inline:var(--gut)}
.nv-plate{position:absolute;inset:0;width:100%;height:100%}
.nv-plate img{width:100%;height:100%;object-fit:cover}

/* the arrow: a short shaft that runs out to full length */
.nv-arrow{width:22px;height:12px;flex:none;overflow:visible;fill:none;stroke:currentColor;stroke-width:1.5}
.nv-arrow .s{transform-origin:100% 50%;transform:scaleX(.55);transition:transform .32s var(--ease)}
.nv-arrow .h{transition:transform .32s var(--ease)}
a:hover>.nv-arrow .s,button:hover>.nv-arrow .s,a:focus-visible>.nv-arrow .s,button:focus-visible>.nv-arrow .s{transform:scaleX(1)}

/* the button: square shouldered, 56px, one per screen */
.nv-btn{position:relative;display:inline-flex;align-items:center;justify-content:space-between;gap:28px;min-height:56px;padding:0 20px 1px 24px;background:var(--ink);color:var(--bone);font-weight:500;font-size:16px;line-height:1.2;letter-spacing:-.005em;border-radius:2px;transition:background .28s var(--ease),color .28s var(--ease),transform .12s var(--ease);-webkit-tap-highlight-color:transparent;user-select:none}
.nv-btn:hover{background:#000}
.nv-btn:active{transform:translateY(1px);background:#2A2118}
.nv-btn:focus-visible{outline-color:var(--ink)}
.nv-btn--bone{background:var(--bone);color:var(--ink)}
.nv-btn--bone:hover{background:#fff}
.nv-btn--bone:active{background:#EFE6D6}
.nv-btn--bone:focus-visible{outline-color:var(--bone)}
.nv-btn--line{background:none;color:inherit;box-shadow:inset 0 0 0 1px currentColor}
.nv-btn--line:hover{background:var(--ink);color:var(--bone);box-shadow:inset 0 0 0 1px var(--ink)}
[data-tone=bone] .nv-btn--line:hover{background:var(--bone);color:var(--ink);box-shadow:inset 0 0 0 1px var(--bone)}
.nv-btn--wide{width:100%}

/* the link: a rule that wipes, an arrow that runs */
.nv-go{display:inline-flex;align-items:center;gap:12px;padding:11px 0 10px;font-weight:500;font-size:16px;line-height:1.2;letter-spacing:-.005em;background:linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat;transition:background-size .36s var(--ease),opacity .2s linear;-webkit-tap-highlight-color:transparent}
.nv-go:hover{background-size:0 1px;background-position:100% 100%}
.nv-go:active{opacity:.62}
.nv-go:focus-visible{outline-offset:2px}
.nv-text-link{background:linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat;padding-bottom:1px;transition:background-size .3s var(--ease)}
.nv-text-link:hover{background-size:0 1px;background-position:100% 100%}

/* amber: facts we do not have yet */
.nv-ph{display:inline-block;font-family:var(--mono);font-size:.8em;line-height:1.3;letter-spacing:0;color:var(--amber);background:var(--ink);outline:1.5px dashed var(--amber);outline-offset:-1.5px;padding:.2em .5em .22em;white-space:nowrap}
.nv-phbox{display:grid;place-items:center;min-height:120px;padding:16px;border:2px dashed var(--amber);color:var(--amber);font-family:var(--mono);font-size:13px;text-align:center}

/* the placard: how a museum names a thing */
.nv-placard{display:block;width:max-content;max-width:min(268px,100%);padding:13px 15px 14px;background:var(--bone);color:var(--ink);border-radius:1px;box-shadow:-5px 4px 0 rgba(21,16,10,.2)}
.nv-placard__k{font-family:var(--mono);font-size:11px;line-height:1.3;color:var(--ink-2)}
.nv-placard__t{margin-top:9px;font-family:var(--serif);font-size:25px;line-height:1.04;letter-spacing:-.01em}
.nv-placard__d{margin-top:3px;font-size:13.5px;line-height:1.34}
.nv-placard__c{margin-top:10px;padding-top:8px;border-top:1px solid var(--rule-ink);font-family:var(--mono);font-size:11px;line-height:1.35}

/* fields */
.nv-field{display:block}
.nv-field__l{display:block;font-size:var(--t-small);font-weight:500;margin-bottom:4px}
.nv-input,.nv-select{display:block;width:100%;min-height:52px;padding:10px 0 9px;font-size:18px;line-height:1.3;color:inherit;border-bottom:1px solid currentColor;appearance:none;-webkit-appearance:none;transition:box-shadow .2s var(--ease)}
.nv-input::placeholder{color:inherit;opacity:.62}
.nv-input:hover,.nv-select:hover{box-shadow:0 1px 0 currentColor}
.nv-input:focus,.nv-select:focus{outline:0;box-shadow:0 2px 0 currentColor}
.nv-input[aria-invalid=true]{box-shadow:0 2px 0 var(--amber)}
.nv-select{padding-right:22px;background:no-repeat right 2px center/11px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 7' fill='none' stroke='%23000' stroke-width='1.4'%3E%3Cpath d='M.6.8 5.5 5.6 10.4.8'/%3E%3C/svg%3E")}

/* the trade picker: every option in plain sight, no dropdown to find.
   the words carry no padding, so commas sit tight; the tap area is an invisible ::after */
.nv-picker{line-height:1.86}
.nv-pick{position:relative;display:inline;font-weight:500;letter-spacing:-.004em;background:linear-gradient(currentColor,currentColor) 0 calc(100% - .02em)/100% 1px no-repeat;transition:background-size .24s var(--ease),opacity .2s linear;-webkit-tap-highlight-color:transparent;white-space:nowrap}
.nv-pick::after{content:"";position:absolute;inset:-.62em -.3em}
.nv-pick:hover{background-size:100% 2px}
.nv-pick:active{opacity:.6}
.nv-pick:focus-visible{outline-offset:3px}
.nv-pick>span{position:relative}
.nv-pick[aria-pressed=true]{background:currentColor;box-shadow:0 0 0 .22em currentColor;border-radius:1px}
.nv-pick[aria-pressed=true]>span{color:var(--pick-on,var(--bone))}
[data-tone=bone] .nv-pick{--pick-on:var(--ink)}

/* the nav. it takes the tone of the chapter beneath it */
.nv-nav{position:fixed;inset:0 0 auto 0;z-index:40;display:flex;align-items:center;gap:40px;height:var(--nav-h);padding:0 var(--gut);color:var(--ink);background:var(--nav-bg,transparent);transition:color .32s linear,background-color .32s linear,transform .46s var(--ease)}
.nv-nav[data-tone=bone]{color:var(--bone)}
.nv-nav.is-away{transform:translateY(-100%)}
.nv-brand{display:flex;align-items:center;gap:11px;margin-right:auto;font-family:var(--serif);font-size:30px;letter-spacing:-.012em;line-height:1;-webkit-tap-highlight-color:transparent}
.nv-brand__n{width:38px;height:auto;margin-top:1px;transition:transform .5s var(--ease)}
.nv-brand:hover .nv-brand__n{transform:translateY(-1px) scale(1.05)}
.nv-brand:active .nv-brand__n{transform:scale(.96)}
.nv-nav__links{display:flex;align-items:center;gap:30px;font-size:15px;font-weight:500;letter-spacing:-.005em}
.nv-nav__a{position:relative;display:inline-flex;align-items:center;gap:6px;height:44px;font-weight:500}
.nv-nav__a::after{content:"";position:absolute;left:0;right:0;bottom:8px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:100% 50%;transition:transform .36s var(--ease)}
.nv-nav__a:hover::after,.nv-nav__a[aria-expanded=true]::after,.nv-nav__a[aria-current=page]::after{transform:scaleX(1);transform-origin:0 50%}
.nv-nav__a:active{opacity:.6}
.nv-chev{width:9px;height:6px;fill:none;stroke:currentColor;stroke-width:1.4;transition:transform .3s var(--ease)}
[aria-expanded=true]>.nv-chev{transform:rotate(180deg)}
.nv-nav__cta{display:inline-flex;align-items:center;gap:14px;height:44px;padding:0 15px 1px 17px;font-size:15px;font-weight:500;letter-spacing:-.005em;box-shadow:inset 0 0 0 1px currentColor;border-radius:2px;transition:background .28s var(--ease),color .28s var(--ease),box-shadow .28s var(--ease),transform .12s var(--ease)}
.nv-nav__cta .nv-arrow{width:20px;height:11px}
.nv-nav__cta:hover{background:var(--ink);color:var(--bone);box-shadow:inset 0 0 0 1px var(--ink)}
.nv-nav[data-tone=bone] .nv-nav__cta:hover{background:var(--bone);color:var(--ink);box-shadow:inset 0 0 0 1px var(--bone)}
.nv-nav__cta:active{transform:translateY(1px)}
.nv-nav__menu{display:none;height:44px;padding:0 2px;font-size:15px;font-weight:500;-webkit-tap-highlight-color:transparent}

/* the trades panel: all five, in the open */
.nv-trades{position:fixed;left:0;right:0;top:0;z-index:38;padding-top:var(--nav-h);background:var(--bone);color:var(--ink);transform:translateY(-101%);visibility:hidden;transition:transform .5s var(--ease),visibility 0s .5s}
.nv-trades.is-open{transform:none;visibility:visible;transition:transform .5s var(--ease),visibility 0s}
.nv-trades__row{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border-top:1px solid var(--rule-ink)}
.nv-trade{position:relative;display:flex;flex-direction:column;min-height:236px;padding:20px var(--gut) 18px;border-left:1px solid var(--rule-ink);transition:color .22s linear;overflow:hidden;isolation:isolate}
.nv-trade:first-child{border-left:0}
.nv-trade::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--wall);transform:scaleY(.024);transform-origin:50% 0;transition:transform .42s var(--ease)}
.nv-trade:hover::before,.nv-trade:focus-visible::before{transform:none}
.nv-trade:hover,.nv-trade:focus-visible{color:var(--wall-fg)}
.nv-trade:focus-visible{outline-offset:-4px}
.nv-trade__t{font-family:var(--serif);font-size:clamp(26px,2.4vw,38px);line-height:1.04;letter-spacing:-.012em;margin-top:8px}
.nv-trade__l{margin-top:auto;padding-top:20px;text-wrap:balance;font-family:var(--serif);font-style:italic;font-size:clamp(17px,1.4vw,20px);line-height:1.2}
.nv-trade .nv-arrow{margin-top:14px}
.nv-scrim{position:fixed;inset:0;z-index:37;background:rgba(21,16,10,.38);opacity:0;pointer-events:none;transition:opacity .3s linear}
.nv-scrim.is-open{opacity:1;pointer-events:auto}

/* the phone sheet */
.nv-sheet{display:none}

/* the thumb dock */
.nv-dock{display:none}

/* the cut: a jump across the film, not a long smooth scroll */
.nv-cut{position:fixed;inset:0;z-index:60;background:var(--ink);opacity:0;pointer-events:none;transition:opacity .14s linear}
.nv-cut.is-on{opacity:1}

/* the plinth: the name is cut into the plate as it is typed, and the form is the message itself */
.nv-plinth{position:relative;background:var(--ruby);color:var(--bone);overflow:hidden;isolation:isolate}
.nv-plinth__set{position:absolute;inset:0;z-index:-1}
.nv-plinth__set img{object-position:100% 100%}
.nv-plinth__body{position:relative;width:min(49%,780px);min-height:calc(var(--vh)*100);display:flex;flex-direction:column;justify-content:center;padding:calc(var(--nav-h) + var(--vh)*1) 0 calc(var(--vh)*4 + 10px) var(--gut)}
.nv-plinth__h{font-size:min(9.2vw,calc(var(--vh)*16.4),170px);line-height:1;letter-spacing:-.022em;white-space:nowrap;margin-left:-.02em}
.nv-plinth__lede{margin-top:clamp(10px,calc(var(--vh)*1.8),18px);max-width:29em}
.nv-plinth__face{position:absolute;left:0;top:0;display:flex;align-items:center;justify-content:center;transform-origin:0 0;pointer-events:none}
.nv-engrave{font-family:var(--serif);color:var(--saffron);background:linear-gradient(178deg,#FFEDB0 8%,#FFC73C 44%,#F49A12 60%,#FFE08C 94%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;text-align:center;line-height:1.04;letter-spacing:-.008em;white-space:pre-line;filter:drop-shadow(0 -.014em 0 rgba(2,3,34,.8)) drop-shadow(0 .012em 0 rgba(255,255,255,.26))}
.nv-engrave i{font-style:normal;display:inline-block;animation:nv-cut .34s var(--ease) both}
@keyframes nv-cut{from{opacity:.1;transform:translateY(.05em) scale(1.08);filter:brightness(2.2)}to{opacity:1;transform:none;filter:none}}
.nv-msg{margin-top:clamp(16px,calc(var(--vh)*3.4),34px);font-family:var(--serif);font-size:min(3.2vw,calc(var(--vh)*5.6),54px);line-height:1.36;letter-spacing:-.01em}
.nv-msg__in,.nv-msg__sel{display:inline-block;max-width:100%;height:1.14em;margin:0 .03em;padding:0 .08em;font-family:var(--serif);font-size:inherit;letter-spacing:inherit;line-height:1.1;vertical-align:baseline;color:var(--bone);background-color:transparent;box-shadow:inset 0 -1.5px 0 var(--bone-2);border-radius:1px;appearance:none;-webkit-appearance:none;field-sizing:content;transition:background-color .2s linear,box-shadow .2s var(--ease)}
.nv-msg__in{min-width:4.2em}
.nv-msg__in::placeholder{color:var(--bone);opacity:.7;font-style:italic}
.nv-msg__in:hover,.nv-msg__sel:hover{background-color:rgba(249,243,232,.1);box-shadow:inset 0 -1.5px 0 var(--bone)}
.nv-msg__in:focus,.nv-msg__sel:focus{outline:0;background-color:rgba(249,243,232,.14);box-shadow:inset 0 -2px 0 var(--saffron)}
.nv-msg__in[aria-invalid=true]{box-shadow:inset 0 -2px 0 var(--amber)}
.nv-msg__sel{padding-right:.62em;background-repeat:no-repeat;background-position:right .14em center;background-size:.3em;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6' fill='%23F9F3E8'/%3E%3C/svg%3E")}
.nv-msg__sel option{color:var(--ink);font-family:var(--sans);font-size:16px}
.nv-plinth__act{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px;margin-top:clamp(14px,calc(var(--vh)*2.8),28px)}
.nv-plinth__or{font-size:15px;line-height:1.4}
.nv-plinth__note{min-height:1.4em;margin-top:8px;font-size:var(--t-small);line-height:1.4}

/* the credits: the film ends where it began */
.nv-credits{position:relative;background:linear-gradient(var(--saffron),var(--marigold));color:var(--ink);padding:calc(var(--vh)*4 + 16px) var(--gut) 0;overflow:hidden}
.nv-credits__lead{text-align:center;font-family:var(--serif);font-style:italic;font-size:var(--d4);line-height:1.1;margin-bottom:calc(var(--vh)*2.6 + 6px)}
/* set the way film credits are set: everything hangs off a centre line, the job to the left of it and the name to the right */
.nv-roll{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 clamp(24px,4vw,72px);max-width:1180px;margin:0 auto calc(var(--vh)*2.6 + 8px)}
.nv-roll__h{font-family:var(--mono);font-size:12px;line-height:1.3;text-align:center;padding-bottom:12px}
.nv-roll dl>div{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 clamp(12px,1.3vw,20px);padding:2px 0;align-items:baseline}
.nv-roll dt{text-align:right;font-size:15px;line-height:1.3}
.nv-roll dd{font-family:var(--serif);font-size:clamp(23px,1.95vw,31px);line-height:1.12;letter-spacing:-.008em}
.nv-credits__leave{max-width:50ch;margin:0 auto calc(var(--vh)*2 + 10px);text-align:center;font-size:var(--t-lede);line-height:1.4}
.nv-districts{max-width:1180px;margin:0 auto calc(var(--vh)*2 + 10px)}
.nv-districts__h{text-align:center;font-family:var(--mono);font-size:12px;line-height:1.3;margin-bottom:14px}
.nv-districts__l{text-align:center;font-family:var(--serif);font-size:clamp(24px,2.2vw,38px);line-height:1.2;letter-spacing:-.012em;text-wrap:balance}
.nv-districts__l span{display:inline-block;margin:0 .22em}
.nv-reach{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px;padding:18px 0 22px;border-top:1px solid var(--ink);font-size:15px;line-height:1.4}
.nv-reach__k{display:block;font-family:var(--mono);font-size:12px;line-height:1.3;margin-bottom:7px}
.nv-reach__v{display:block}
.nv-reach a:not(.nv-ph){background:linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat;transition:background-size .3s var(--ease)}
.nv-reach a:not(.nv-ph):hover{background-size:0 1px;background-position:100% 100%}
.nv-reach__l{display:block;padding:2px 0}
.nv-sign{display:block;font-family:var(--serif);font-size:calc((100vw - 2*var(--gut))*.2577);line-height:.8;letter-spacing:-.03em;white-space:nowrap;margin:calc(var(--vh)*2) 0 0 -.012em;padding-bottom:.1em}
.nv-fine{display:flex;justify-content:space-between;gap:20px;padding:14px 0 calc(18px + var(--dock-h));font-size:13.5px;line-height:1.4;border-top:1px solid var(--ink)}

/* a website in a frame. give the frame a height or an aspect ratio; add data-nv-view and it scrolls as it goes by.
   the shadow is hard and falls left, because the sun in the studio is on the right */
.nv-view{position:relative;overflow:hidden;background:rgba(0,0,0,.18);box-shadow:-16px 12px 0 rgba(21,16,10,.2);margin:0;transition:box-shadow .36s var(--ease)}
.nv-view img{position:absolute;left:0;top:0;width:100%;height:auto;max-width:none;will-change:transform}
.nv-view__a{position:absolute;inset:0;display:block}
.nv-view:hover{box-shadow:-22px 17px 0 rgba(21,16,10,.26)}
.nv-view:active{box-shadow:-10px 8px 0 rgba(21,16,10,.26)}
.nv-view__a:focus-visible{outline:3px solid var(--bone);outline-offset:-7px}
.nv-flat .nv-view img{transform:none!important}

/* the man, cut out with his shadow, so he can stand anywhere on any floor. left and bottom are where his feet go. set --man to his height.
   use him sparingly and for scale. he looks up, or he walks. he never waves */
.nv-man{position:absolute;z-index:1;height:calc(var(--man,84px)/.59);width:auto;max-width:none;transform:translate(-79%,8.7%);pointer-events:none}

/* a note in the margin of a website: a rule, then Caslon italic */
.nv-note{display:flex;align-items:flex-start;gap:10px;font-family:var(--serif);font-style:italic;font-size:var(--d5);line-height:1.14;letter-spacing:-.008em;max-width:15em}
.nv-note::before{content:"";flex:none;width:26px;height:1px;margin-top:.62em;background:currentColor}

/* a plain sum: example numbers set like a receipt, labelled as examples */
.nv-sum{width:100%;max-width:34em;border-collapse:collapse;font-size:var(--t-lede);line-height:1.3;font-variant-numeric:tabular-nums}
.nv-sum td,.nv-sum th{padding:9px 0 8px;border-top:1px solid var(--rule,var(--rule-ink));text-align:left;font-weight:400}
.nv-sum td:last-child,.nv-sum th:last-child{text-align:right;white-space:nowrap}
.nv-sum tr:last-child td{border-top:2px solid currentColor;font-weight:600}
.nv-sum caption{caption-side:bottom;text-align:left;padding-top:10px;font-size:var(--t-small);line-height:1.4}

/* the opening of a trade page: plate, huge line, then the N cut out in front of the line */
.nv-studio{position:relative;height:calc(var(--vh)*100);min-height:560px;overflow:hidden;background:var(--wall);color:var(--wall-fg)}
.nv-studio .nv-plate img{object-position:50% 0}
.nv-studio__h{position:absolute;left:calc(var(--gut) - .3vw);top:calc(var(--nav-h) + .4vw);right:var(--gut);font-size:min(12.6vw,calc(var(--vh)*24));line-height:1;letter-spacing:-.022em}
.nv-studio__h span{display:block}
.nv-studio__cut{pointer-events:none}
.nv-studio__foot{position:absolute;left:var(--gut);right:var(--gut);bottom:calc(var(--gut) + 8px);display:flex;align-items:flex-end;justify-content:space-between;gap:24px}

/* a short strip with the price, for the end of any page */
.nv-strip{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px 32px;padding:22px var(--gut);background:var(--saffron);color:var(--ink)}
.nv-strip__p{font-family:var(--serif);font-size:var(--d4);line-height:1.06;letter-spacing:-.012em}

/* questions: the answer is short and the question is large */
.nv-qs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(28px,5vw,90px)}
.nv-q{border-top:1px solid var(--q-rule,var(--rule-ink));padding:16px 0 22px}
.nv-q summary{display:flex;justify-content:space-between;gap:16px;list-style:none;cursor:default;font-family:var(--serif);font-size:var(--d5);line-height:1.1;letter-spacing:-.01em;-webkit-tap-highlight-color:transparent}
.nv-q summary::-webkit-details-marker{display:none}
.nv-q__x{display:none}
.nv-q p{margin-top:8px;max-width:46ch;font-size:var(--t-body);line-height:1.46}

/* the N, drawn into an element */
.nv-n{display:inline-block;width:1.48em;height:1em;background:url(img/nv-n.svg) no-repeat center/contain}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* phones and small tablets */
@media (max-width:820px){
  .nv-nav{gap:14px}
  .nv-brand{font-size:27px;gap:9px}.nv-brand__n{width:33px}
  .nv-nav__links,.nv-nav__cta{display:none}
  .nv-nav__menu{display:block}
  .nv-trades,.nv-scrim{display:none}

  .nv-sheet{position:fixed;inset:0;z-index:38;display:flex;flex-direction:column;gap:0;background:linear-gradient(var(--saffron),var(--marigold));color:var(--ink);padding:calc(var(--nav-h) + 10px) var(--gut) calc(var(--dock-h) + 18px);overflow-y:auto;opacity:0;visibility:hidden;transition:opacity .22s linear,visibility 0s .22s}
  .nv-sheet.is-open{opacity:1;visibility:visible;transition:opacity .22s linear,visibility 0s}
  .nv-sheet__big{display:block;font-family:var(--serif);font-size:clamp(44px,13.4vw,64px);line-height:1.14;letter-spacing:-.016em}
  .nv-sheet__sub{display:grid;gap:0;padding:6px 0 12px}
  .nv-sheet__sub a{display:flex;align-items:center;gap:12px;min-height:44px;font-size:17px;font-weight:500;border-top:1px solid var(--rule-ink)}
  .nv-sheet__sub a::before{content:"";flex:none;width:18px;height:18px;background:var(--wall);border-radius:50%}
  .nv-sheet__fine{margin-top:auto;padding-top:14px;font-size:15px}
  .is-sheet .nv-nav{transform:none!important}

  .nv-dock{position:fixed;left:0;right:0;bottom:0;z-index:39;display:grid;grid-template-columns:auto minmax(0,1fr);background:var(--ink);padding-bottom:env(safe-area-inset-bottom);transition:transform .4s var(--ease)}
  .nv-dock a{display:flex;align-items:center;justify-content:center;gap:9px;height:var(--dock-h);font-size:15.5px;font-weight:500;letter-spacing:-.005em;-webkit-tap-highlight-color:transparent;transition:background .12s linear}
  .nv-dock__wa{padding:0 18px;color:var(--bone)}
  .nv-dock__wa:active{background:#2A2118}
  .nv-dock__go{min-width:0;padding:0 16px;background:var(--bone);color:var(--ink);justify-content:space-between!important}
  .nv-dock__go:active{background:#EFE6D6}
  .nv-dock__go span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
  .nv-dock__go span.is-named{font-size:13.5px;line-height:1.24;font-weight:400}
  .nv-dock__go span.is-named b{display:block;font-size:15.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis}
  .nv-dock .nv-arrow{width:20px;height:11px}
  .is-typing .nv-dock{transform:translateY(110%)}

  .nv-plinth__set{position:relative;inset:auto;height:auto;z-index:0}
  .nv-plinth__set .nv-plate{position:relative;inset:auto;height:auto;aspect-ratio:var(--plinth-ar,1000/1180)}
  .nv-plinth__body{width:auto;min-height:0;padding:10px var(--gut) calc(var(--dock-h) + 26px)}
  .nv-plinth__h{font-size:17.6vw;white-space:nowrap}
  .nv-plinth__lede{margin-top:6px}
  .nv-msg{margin-top:12px;font-size:30px;line-height:1.42}
  .nv-msg__in{min-width:0;max-width:100%}
  .nv-plinth__act{display:block;margin-top:16px}
  .nv-btn.nv-btn--bone{display:flex;width:100%}
  .nv-plinth__or{margin-top:12px}

  .nv-credits{padding-top:calc(var(--nav-h) + 44px)}
  .nv-roll{grid-template-columns:1fr;gap:26px}
  .nv-reach{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 14px}
  .nv-reach .nv-ph{white-space:normal;word-break:break-word}
  .nv-fine{flex-direction:column;gap:3px}
  .nv-sign{padding-bottom:.08em}

  .nv-studio__h{font-size:18.4vw;line-height:1.02;top:calc(var(--nav-h) - 2px)}
  .nv-studio__foot{display:block;bottom:calc(var(--dock-h) + 14px)}
  .nv-qs{grid-template-columns:1fr}
  .nv-q{padding:0}
  .nv-q summary{align-items:baseline;min-height:60px;padding:14px 0;font-size:25px;cursor:pointer}
  .nv-q__x{display:block;flex:none;width:12px;height:12px;background:linear-gradient(currentColor,currentColor) center/100% 1.5px no-repeat,linear-gradient(currentColor,currentColor) center/1.5px 100% no-repeat;transition:transform .3s var(--ease)}
  .nv-q[open] .nv-q__x{transform:rotate(45deg)}
  .nv-q p{margin:0;padding-bottom:18px}
}
@media (min-width:821px){.nv-dock,.nv-sheet{display:none}}