/* the five trade pages. one kit, five rooms. each trade adds its own compositions at the end */
body[data-nv-page-trade=villas]{--a:var(--lagoon);--a2:var(--lagoon-floor);--deep:#05505A;--pale:#D6F3EE;--a-fg:var(--ink);--a-fg2:var(--ink-2);--a-rule:var(--rule-ink);--run:600;--run-p:360}
body[data-nv-page-trade=rent-a-car]{--a:var(--cobalt);--a2:var(--cobalt-floor);--deep:#0B1C86;--pale:#DFE5FF;--a-fg:var(--bone);--a-fg2:var(--bone-2);--a-rule:var(--rule-bone);--run:470;--run-p:300}
body[data-nv-page-trade=weddings]{--a:var(--fuchsia);--a2:var(--fuchsia-floor);--deep:#7D0B46;--pale:#FFE1EB;--a-fg:var(--bone);--a-fg2:var(--bone-2);--a-rule:var(--rule-bone);--run:560;--run-p:350}
body[data-nv-page-trade=tuition]{--a:var(--violet);--a2:var(--violet-floor);--deep:#36108A;--pale:#EEE6FF;--a-fg:var(--bone);--a-fg2:var(--bone-2);--a-rule:var(--rule-bone);--run:420;--run-p:280}
body[data-nv-page-trade=solar]{--a:var(--ember);--a2:var(--ember-floor);--deep:#7E2703;--pale:#FFE7D4;--a-fg:var(--ink);--a-fg2:var(--ink-2);--a-rule:var(--rule-ink);--run:680;--run-p:390}

/* surfaces */
.t-a{background:var(--a);color:var(--a-fg);--rule:var(--a-rule);--q-rule:var(--a-rule)}
.t-a2{background:var(--a2);color:var(--a-fg);--rule:var(--a-rule);--q-rule:var(--a-rule)}
.t-deep{background:var(--deep);color:var(--bone);--rule:var(--rule-bone);--q-rule:var(--rule-bone)}
.t-pale{background:var(--pale);color:var(--ink);--rule:var(--rule-ink);--q-rule:var(--rule-ink)}
.t-saff{background:var(--saffron);color:var(--ink);--rule:var(--rule-ink)}
.t-bone{background:var(--bone);color:var(--ink);--rule:var(--rule-ink);--q-rule:var(--rule-ink)}

/* the line is set so the N only stands in front of its last letters */
@media (min-width:821px){
  .t-hero .nv-studio__h{font-size:min(10vw,calc(var(--vh)*18.6));line-height:1.02}
  [data-nv-page-trade=villas] .t-hero .nv-studio__h{font-size:min(10.2vw,calc(var(--vh)*21))}
  [data-nv-page-trade=rent-a-car] .t-hero .nv-studio__h{font-size:min(12vw,calc(var(--vh)*23))}
  [data-nv-page-trade=tuition] .t-hero .nv-studio__h{font-size:min(8.6vw,calc(var(--vh)*15))}
}

/* the kit */
.t-sec{position:relative;padding:clamp(64px,8.4vw,124px) var(--gut)}
.t-h{font-size:var(--d2);max-width:12.4em}
.t-h--3{font-size:var(--d3);max-width:15em}
.t-k{margin-bottom:clamp(12px,1.4vw,20px)}
.t-head{margin-bottom:clamp(36px,5vw,76px)}
.t-sub{margin-top:clamp(14px,1.6vw,24px);max-width:36em}
.t-hero__l{max-width:30em}
.t-time{font-family:var(--mono);letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.t-after{margin-top:clamp(36px,5vw,72px);font-family:var(--serif);font-size:var(--d4);line-height:1.08;letter-spacing:-.012em;max-width:22em}

/* the long capture: a pinned frame on a tall run. the notes sit at the same fraction of the run as their section of the site */
.t-long{position:relative;padding:clamp(64px,8vw,116px) var(--gut) clamp(56px,7vw,96px)}
.t-long__h{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px clamp(24px,5vw,80px);align-items:end;margin-bottom:clamp(28px,4vw,56px)}
.t-long__go{display:flex;flex-wrap:wrap;gap:12px 36px;margin-top:clamp(18px,2vw,28px)}
.t-long__h .nv-placard{min-width:15em}
.t-run{position:relative;display:grid;grid-template-columns:minmax(0,56fr) minmax(0,30fr);gap:clamp(24px,5vw,84px)}
.t-run--r{grid-template-columns:minmax(0,30fr) minmax(0,56fr)}
.t-run--r .t-run__f{order:2}
.t-run--c{grid-template-columns:minmax(0,24fr) minmax(0,50fr) minmax(0,24fr);gap:clamp(20px,3vw,48px)}
.t-run--c .t-run__f{order:2}
.t-run--c .t-run__n:last-child{order:3}
.t-run__f{position:relative;margin:0;align-self:start;background:var(--bone);box-shadow:-16px 12px 0 rgba(21,16,10,.22)}
.t-run__a{display:block}
.t-run__a:focus-visible{outline:3px solid var(--ink);outline-offset:-7px}
.t-run__f img{width:100%;height:auto}
.t-run__n{position:relative;min-height:100%}
.t-run .nv-note{position:absolute;left:0}
.nv-live .t-run{height:calc(var(--vh)*var(--run))}
.nv-live .t-run__f{position:sticky;top:calc(var(--nav-h) + 8px);height:calc(var(--vh)*100 - var(--nav-h) - 34px);overflow:hidden}
.nv-live .t-run__f img{will-change:transform}

/* a shared list: a word and a plain line under a rule */
.t-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(28px,5vw,90px)}
.t-list>div{border-top:1px solid var(--rule);padding:14px 0 26px}
.t-list dt{font-family:var(--serif);font-size:var(--d4);line-height:1.06;letter-spacing:-.012em}
.t-list dd{margin-top:8px;max-width:34em}

/* the sum */
.t-sum{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,6fr);gap:32px clamp(32px,6vw,110px);align-items:end}
.t-sum .nv-sum{justify-self:end}
.t-sum .t-h{font-size:var(--d3)}
.t-sum--flip .t-sum__l{order:2}
.t-sum--flip .nv-sum{justify-self:start}
.t-qs .t-h{margin-bottom:clamp(28px,3.6vw,52px)}
.t-strip__go{display:flex;align-items:center;gap:24px}

/* villas. a tide of questions */
.v-q{display:grid;gap:clamp(22px,2.6vw,38px)}
.v-q li{display:grid;grid-template-columns:5.2em minmax(0,1fr);column-gap:18px;align-items:baseline;margin-left:calc(var(--i)*7.4vw);max-width:58em}
.v-q .t-time{font-size:15px}
.v-q__q{font-family:var(--serif);font-style:italic;font-size:var(--d3);line-height:1.04;letter-spacing:-.014em}
.v-q__a{grid-column:2;margin-top:5px;max-width:32em;color:var(--ink-2)}
/* villas. the seasons, set as a band */
.v-sea{margin-top:clamp(44px,6vw,88px)}
.v-sea__t{font-family:var(--serif);font-size:var(--d4);line-height:1.06;letter-spacing:-.012em;max-width:22em;margin-bottom:10px}
.v-sea__g{display:grid;grid-template-columns:minmax(150px,17em) repeat(12,minmax(0,1fr));margin-top:22px;border-bottom:1px solid var(--rule)}
.v-sea__g span{font-family:var(--mono);font-size:12px;padding:0 0 8px 6px}
.v-sea__g b{grid-column:1;grid-row:var(--r);font-weight:400;padding:11px 12px 11px 0;border-top:1px solid var(--rule)}
.v-sea__g i{grid-column:var(--s)/var(--e);grid-row:var(--r);height:100%;min-height:46px;background:var(--a);border-top:1px solid var(--rule)}
.v-sea__c{margin-top:10px;font-size:var(--t-small);max-width:44em}
/* villas. the guest register */
.v-reg{width:100%;border-collapse:collapse}
.v-reg th{font-family:var(--mono);font-size:12px;font-weight:400;text-align:left;padding:0 18px 9px 0}
.v-reg td{border-top:1px solid var(--rule);padding:13px 22px 15px 0;vertical-align:baseline}
.v-reg td:nth-child(1){font-family:var(--serif);font-size:var(--d4);line-height:1.06;width:24%}
.v-reg td:nth-child(2){font-family:var(--serif);font-style:italic;font-size:var(--d5);line-height:1.16;width:41%;padding-right:clamp(20px,4vw,60px)}

/* rent-a-car. the arrivals board */
.r-board{border-bottom:1px solid var(--rule)}
.r-board li{display:grid;grid-template-columns:minmax(0,9fr) minmax(0,9fr) minmax(0,28fr) minmax(0,24fr);gap:6px clamp(16px,2.6vw,40px);align-items:baseline;border-top:1px solid var(--rule);padding:14px 0 16px}
.r-board .t-time{font-size:clamp(28px,3.3vw,54px);line-height:1;color:var(--saffron)}
.r-board__s{font-family:var(--mono);font-size:12px;color:var(--saffron)}
.r-board__h{font-family:var(--serif);font-size:var(--d4);line-height:1.06;letter-spacing:-.012em}
.r-board__n{color:var(--bone-2)}
/* rent-a-car. the destination board */
.r-dest{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:24px clamp(32px,6vw,100px);margin-bottom:clamp(44px,6vw,84px)}
.r-dest__from{font-family:var(--serif);font-size:var(--d2);line-height:1.02;letter-spacing:-.018em}
.r-dest ul{border-bottom:1px solid var(--ink)}
.r-dest li{display:flex;align-items:baseline;justify-content:space-between;gap:16px;border-top:1px solid var(--ink);padding:3px 0 5px;font-family:var(--serif);font-size:var(--d3);line-height:1.08;letter-spacing:-.014em}
.r-dest .nv-ph{font-size:13px;flex:none}
/* rent-a-car. the name board */
.r-name{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,6fr);gap:40px clamp(36px,6vw,110px);align-items:center}
.r-name__b{background:var(--bone);color:var(--ink);padding:clamp(26px,3.4vw,52px) clamp(22px,3vw,48px);box-shadow:-18px 14px 0 rgba(21,16,10,.3);transform:rotate(-1.4deg)}
.r-name__t{font-family:var(--serif);font-weight:700;font-size:var(--d2);line-height:1.02;letter-spacing:-.024em;overflow-wrap:anywhere}
.r-name__c{margin-top:14px;font-size:var(--t-small)}
.t-lines{margin-top:clamp(18px,2vw,28px)}
.t-lines li{border-top:1px solid var(--rule);padding:9px 0 11px}
.t-lines b{font-weight:600}

/* weddings. counted back from one minute */
.w-back{display:grid;grid-template-columns:minmax(0,1fr) minmax(90px,auto) minmax(0,1fr);gap:clamp(20px,2.4vw,32px) clamp(18px,3vw,48px);align-items:baseline}
.w-back .t-time{grid-column:2;font-size:15px;text-align:center}
.w-back__x{grid-column:1;text-align:right;justify-self:end;font-family:var(--serif);font-size:var(--d4);line-height:1.08;letter-spacing:-.012em;max-width:13em}
.w-back__x--r{grid-column:3;text-align:left;justify-self:start}
.w-back>*{grid-row:var(--r)}
.w-nakath{text-align:center;margin:clamp(34px,5vw,70px) 0 0}
.w-nakath__t{font-family:var(--serif);font-size:min(30vw,calc(var(--vh)*46));line-height:1;letter-spacing:-.03em;font-variant-numeric:lining-nums}
.w-nakath__c{margin-top:8px}
.w-aunt{margin-top:clamp(52px,8vw,120px);display:grid;grid-template-columns:minmax(0,8fr) minmax(0,5fr);gap:24px clamp(32px,6vw,110px);align-items:end}
.w-aunt__h{font-size:var(--d2);font-style:italic}
/* weddings. the card */
.w-cardwrap{display:grid;justify-items:center}
.w-card{width:min(100%,47em);background:var(--bone);color:var(--ink);text-align:center;padding:clamp(40px,5.6vw,84px) clamp(20px,5vw,76px);box-shadow:-18px 14px 0 rgba(21,16,10,.3);outline:1px solid var(--ink);outline-offset:-12px}
.w-card__i{font-family:var(--serif);font-style:italic;font-size:var(--d5);line-height:1.16}
.w-card__n{font-size:var(--d3);margin:.18em 0 .2em;overflow-wrap:anywhere}
.w-card dl{margin-top:clamp(24px,3vw,44px)}
.w-card dl div{padding:12px 0 14px}
.w-card dl div+div{border-top:1px solid var(--rule-ink)}
.w-card dt{font-family:var(--serif);font-size:var(--d4);line-height:1.06;letter-spacing:-.012em}
.w-card dd{margin:5px auto 0;max-width:30em}
/* weddings. the reply card */
.w-rsvp{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:32px clamp(36px,6vw,100px);align-items:start}
.w-rsvp__c{background:var(--a);color:var(--a-fg);padding:clamp(22px,2.8vw,42px);box-shadow:-14px 10px 0 rgba(21,16,10,.22)}
.w-rsvp__k{font-family:var(--serif);font-size:var(--d3);line-height:1.04;letter-spacing:.02em}
.w-rsvp__r{display:grid;grid-template-columns:7.4em minmax(0,1fr);gap:4px 16px;border-top:1px solid var(--rule);padding:10px 0 12px}
.w-rsvp__r dt{font-family:var(--serif);font-size:var(--d5);line-height:1.14}
.w-rsvp__r dd{border-bottom:0}

/* tuition. the paper */
.u-paper{max-width:64em;background:var(--bone);color:var(--ink);padding:clamp(26px,4.4vw,68px) clamp(18px,4.4vw,72px);box-shadow:-18px 14px 0 rgba(21,16,10,.32)}
.u-paper__top{display:flex;justify-content:space-between;gap:12px 24px;flex-wrap:wrap;border-bottom:2px solid var(--ink);padding-bottom:12px;margin-bottom:clamp(20px,3vw,38px)}
.u-paper__h{font-size:var(--d3);max-width:15em;margin-bottom:clamp(20px,3vw,36px)}
.u-paper ol{counter-reset:q}
.u-paper li{counter-increment:q;display:grid;grid-template-columns:2.2em minmax(0,1fr) auto;gap:6px 12px;padding:15px 0 16px;border-top:1px solid var(--rule-ink);font-size:var(--t-lede);line-height:1.4}
.u-paper li::before{content:counter(q) ".";font-family:var(--serif);font-size:var(--d5);line-height:1.1}
.u-m{font-family:var(--mono);font-size:12px;white-space:nowrap;padding-top:4px}
.u-end{margin-top:18px;text-align:center;font-family:var(--serif);font-style:italic;font-size:var(--d5)}
.u-mark li{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,9fr) auto;gap:6px clamp(18px,3vw,48px);align-items:baseline;border-top:1px solid var(--rule);padding:13px 0 15px}
.u-mark b{font-family:var(--serif);font-weight:400;font-size:var(--d4);line-height:1.06;letter-spacing:-.012em}
.u-out{margin-top:clamp(30px,4vw,56px);display:grid;grid-template-columns:minmax(0,5fr) minmax(0,8fr);gap:14px clamp(24px,5vw,80px);border-top:2px solid currentColor;padding-top:14px}
.u-out__h{font-size:var(--d4)}
/* tuition. fill in the blanks */
.u-cloze{font-family:var(--serif);font-size:var(--d3);line-height:1.34;letter-spacing:-.012em;max-width:23em}
.u-b{border-bottom:2px solid var(--a);color:var(--deep);font-style:italic;padding:0 .08em}
.u-cloze sup{font-family:var(--mono);font-size:12px;line-height:0;letter-spacing:0;margin-left:2px}
.u-key{margin-top:clamp(28px,4vw,52px);columns:2;column-gap:clamp(28px,5vw,90px);counter-reset:k}
.u-key li{break-inside:avoid;counter-increment:k;padding:8px 0 10px 2em;border-top:1px solid var(--rule);position:relative}
.u-key li::before{content:counter(k);position:absolute;left:0;font-family:var(--mono);font-size:12px;top:12px}

/* solar. one sun, five hours */
.s-arcwrap{--H:clamp(170px,19vw,290px);position:relative;margin-top:calc(clamp(36px,5vw,76px) + 30px)}
.s-arc{position:relative;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(14px,2vw,30px)}
.s-arc__l{position:absolute;left:0;right:0;top:0;width:100%;height:var(--H);overflow:visible}
.s-arc__l path{fill:none;stroke:currentColor;stroke-width:1.5;vector-effect:non-scaling-stroke}
.s-arc li{position:relative;padding-top:calc(var(--H) + 18px);text-align:center}
.s-arc li::before{content:"";position:absolute;left:50%;top:calc(var(--H)*var(--y) - 7px);width:14px;height:14px;margin-left:-7px;background:var(--ink)}
.s-arc li.is-noon::before{top:calc(var(--H)*var(--y) - 24px);width:48px;height:48px;margin-left:-24px;border-radius:50%;background:var(--bone)}
.s-arc .t-time{position:absolute;left:0;right:0;top:calc(var(--H)*var(--y) - 46px);font-size:clamp(20px,2vw,30px);line-height:1}
.s-arc li.is-noon .t-time{top:calc(var(--H)*var(--y) - 62px)}
.s-arc__h{font-family:var(--serif);font-size:var(--d5);line-height:1.12;letter-spacing:-.01em;margin-bottom:6px}
/* solar. from the roof to the bill */
.s-chain{position:relative;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(14px,2vw,30px);border-top:2px solid currentColor}
.s-chain li{position:relative;padding-top:20px}
.s-chain li::before{content:"";position:absolute;left:0;top:-8px;width:14px;height:14px;background:var(--mark,var(--a))}
.s-chain__k{display:block;margin-bottom:10px}
.s-chain__h{font-family:var(--serif);font-size:var(--d4);line-height:1.06;letter-spacing:-.012em;margin-bottom:8px}
/* solar. the rating plate */
.s-rate{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,7fr);gap:36px clamp(36px,6vw,110px);align-items:center}
.s-plate{background:var(--bone);color:var(--ink);border:2px solid var(--ink);outline:1px solid var(--ink);outline-offset:-9px;padding:clamp(24px,2.8vw,42px);box-shadow:-16px 12px 0 rgba(21,16,10,.26)}
.s-plate__t{font-family:var(--serif);font-weight:700;font-size:var(--d3);line-height:1.04;letter-spacing:-.02em;padding-bottom:10px;border-bottom:2px solid var(--ink);overflow-wrap:anywhere}
.s-plate dl div{display:grid;grid-template-columns:7.2em minmax(0,1fr);gap:10px;padding:8px 0 9px;border-bottom:1px solid var(--rule-ink)}
.s-plate dt{font-family:var(--mono);font-size:12px;padding-top:3px}
.s-plate dd{line-height:1.36}

/* tablet and phone */
@media (max-width:1100px){
  .r-board li{grid-template-columns:minmax(0,10fr) minmax(0,8fr) minmax(0,26fr)}
  .r-board__n{grid-column:3}
  .s-chain{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:34px;border-top:0}
  .s-chain li{border-top:2px solid currentColor}
}
@media (max-width:820px){
  /* on a phone the studio drops below the line, so the N stands under the words and not across them */
  .t-hero{--drop:max(-14vw,min(46vw,calc(var(--vh)*100 - 128px - 126vw)))}
  .t-hero .nv-plate img{transform:translateY(var(--drop))}
  .t-hero>.nv-plate:first-child img{-webkit-mask-image:linear-gradient(transparent,#000 14%);mask-image:linear-gradient(transparent,#000 14%)}
  .t-hero .nv-studio__h{font-size:min(var(--hp,18.4vw),calc(var(--vh)*8.7))}
  .t-hero--flow .nv-studio__h span{display:inline}
  .t-hero__x{display:none}
  [data-nv-page-trade=villas] .t-hero{--hp:22vw}
  [data-nv-page-trade=rent-a-car] .t-hero{--hp:18vw}
  [data-nv-page-trade=tuition] .t-hero{--hp:16.5vw}
  [data-nv-page-trade=solar] .t-hero{--hp:16vw}
  .t-hero__l{margin-bottom:12px}
  .t-hero .nv-btn{display:none}
  .t-long__h,.t-sum,.t-list,.r-dest,.r-name,.w-aunt,.w-rsvp,.u-out,.s-rate{grid-template-columns:minmax(0,1fr)}
  .t-long__h .nv-placard{justify-self:start;min-width:0}
  .t-sum .nv-sum{justify-self:auto;max-width:none}
  .t-sum--flip .t-sum__l{order:0}
  .t-run,.t-run--r,.t-run--c{display:block}
  .t-run__n{position:absolute;inset:0;min-height:0;pointer-events:none;z-index:2}
  .t-run .nv-note{left:auto;right:-6px;width:max-content;max-width:76%;background:var(--bone);color:var(--ink);padding:9px 12px 10px;font-size:20px;line-height:1.16;box-shadow:-6px 6px 0 rgba(21,16,10,.26)}
  .t-run .nv-note::before{width:14px}
  .nv-live .t-run{height:calc(var(--vh)*var(--run-p))}
  .nv-live .t-run__f{top:calc(var(--nav-h) + 6px);height:calc(var(--vh)*100 - var(--nav-h) - var(--dock-h) - 20px)}
  .t-run__f{box-shadow:-8px 7px 0 rgba(21,16,10,.22)}
  .t-strip__go{flex-wrap:wrap}

  .v-q li{margin-left:calc(var(--i)*3vw);grid-template-columns:minmax(0,1fr)}
  .v-q__a{grid-column:1}
  .v-sea__g{grid-template-columns:repeat(12,minmax(0,1fr))}
  .v-sea__g>span:first-child{display:none}
  .v-sea__g span{padding-left:2px;font-size:10px;text-align:center}
  .v-sea__g b{grid-column:1/-1;grid-row:calc(var(--r)*2 - 1)}
  .v-sea__g i{grid-column:calc(var(--s) - 1)/calc(var(--e) - 1);grid-row:calc(var(--r)*2);min-height:16px;border-top:0}
  .v-reg,.v-reg tbody,.v-reg tr,.v-reg td{display:block;width:auto!important}
  .v-reg thead{display:none}
  .v-reg tr{border-top:1px solid var(--rule);padding:11px 0 14px}
  .v-reg td{border:0;padding:0 0 4px}

  .r-board li{grid-template-columns:minmax(0,1fr) auto}
  .r-board__s{grid-column:2;grid-row:1;text-align:right}
  .r-board__h,.r-board__n{grid-column:1/-1}
  .r-name__b{order:2;margin-left:8px}

  .w-back{grid-template-columns:minmax(0,1fr);gap:0}
  .w-back>*{grid-row:auto}
  .w-back .t-time{grid-column:1;text-align:left;margin-top:18px}
  .w-back__x,.w-back__x--r{grid-column:1;text-align:left;justify-self:start}
  .w-nakath__t{font-size:33vw}
  .w-rsvp__r{grid-template-columns:minmax(0,1fr)}

  .u-paper li{grid-template-columns:2em minmax(0,1fr)}
  .u-m{grid-column:2;padding-top:0}
  .u-mark li{grid-template-columns:minmax(0,1fr) auto}
  .u-mark li>span:nth-child(2){grid-column:1/-1;grid-row:2}
  .u-key{columns:1}

  .s-arc{grid-template-columns:minmax(0,1fr);border-left:2px solid currentColor;padding-left:16px;gap:24px}
  .s-arc__l{display:none}
  .s-arcwrap{margin-top:0}
  .s-arc li{padding-top:0;text-align:left}
  .s-arc li::before,.s-arc li.is-noon::before{left:-23px;top:6px;margin:0}
  .s-arc li.is-noon::before{left:-33px;top:-6px;width:32px;height:32px}
  .s-arc .t-time,.s-arc li.is-noon .t-time{position:static;display:block;margin-bottom:6px;font-size:22px}
  .s-chain{grid-template-columns:minmax(0,1fr);row-gap:0}
  .s-chain li{padding:18px 0 20px}
}