/* Through His Lens course site. Palette + fonts from lilyphotographydp.com. */
:root{
  --mod:#CB7A65; --tint:color-mix(in srgb,var(--mod) 7%,#fff); --soft:color-mix(in srgb,var(--mod) 30%,#fff);
  --bg:#fff; --wash:#FBF5F1; --ink:#2b2b2b; --mute:#6f6a66;
  --navy:#084268; --terra:#CB7A65; --rust:#A44E3F; --sand:#CCBBAB; --blush:#E3C9B8; --line:#ece2d9;
  --body:'Lora',Georgia,serif; --script:'Allura',cursive; --caps:'Nixie One',Georgia,serif;
  --ease:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--ink);font:17px/1.7 var(--body);padding-bottom:env(safe-area-inset-bottom)}
.wrap{width:min(700px,100% - 36px);margin-inline:auto}
:focus-visible{outline:2px solid var(--terra);outline-offset:3px}
button{font:inherit;color:inherit}

/* top nav */
.topnav{display:flex;justify-content:safe center;gap:clamp(12px,4vw,40px);border-bottom:1px solid var(--sand);padding:0 12px;overflow-x:auto;scrollbar-width:none}
.topnav a{font:11px var(--caps);letter-spacing:.2em;text-transform:uppercase;color:var(--navy);text-decoration:none;padding:15px 0;white-space:nowrap}
.topnav a:hover{color:var(--terra)}
.progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:5}
.progress i{display:block;height:100%;background:var(--mod);transform-origin:0 50%;transform:scaleX(0)}

/* hero */
.hero{text-align:center;padding:40px 0 28px;border-bottom:3px solid var(--mod)}
.kicker{font:12px var(--caps);letter-spacing:.32em;text-transform:uppercase;color:var(--mod)}
h1{font:500 clamp(32px,7vw,46px)/1.1 var(--body);color:var(--navy);letter-spacing:-.015em;margin-top:10px;text-wrap:balance}
.sub{font:clamp(30px,6vw,38px)/1.1 var(--script);color:var(--mod);margin-top:8px}
.rise{animation:rise .9s var(--ease) both}.rise.d1{animation-delay:.1s}.rise.d2{animation-delay:.24s}.rise.d3{animation-delay:.38s}
@keyframes rise{from{opacity:0;transform:translateY(18px)}}

/* verse */
.verse{text-align:center;padding:clamp(34px,7vw,52px) 8px;border-bottom:1px solid var(--soft)}
.verse q{display:block;font:italic clamp(21px,4.8vw,27px)/1.5 var(--body);color:var(--navy);quotes:"\201C" "\201D"}
.verse cite{display:block;margin-top:12px;font:11px var(--caps);letter-spacing:.26em;color:var(--mod);font-style:normal;text-transform:uppercase}

.intro{font-size:18.5px;margin-top:28px}
.intro::after{content:"";display:block;clear:both}
.me{float:right;width:clamp(120px,32%,180px);aspect-ratio:4/5;object-fit:cover;object-position:50% 15%;margin:6px 0 12px 20px;border:7px solid var(--wash);outline:1px solid var(--sand)}

/* content */
section{margin-top:36px}
h2{font:12px var(--caps);letter-spacing:.28em;text-transform:uppercase;color:var(--navy);padding-bottom:10px;border-bottom:1px solid var(--line)}
section p{margin-top:12px}
ul.rows{list-style:none}
ul.rows li{position:relative;padding:12px 0 12px 22px;border-bottom:1px solid var(--line)}
ul.rows li::before{content:"";position:absolute;left:2px;top:24px;width:7px;height:7px;background:var(--mod);transform:rotate(45deg)}
ol.steps{list-style:none;counter-reset:s;margin-top:6px}
ol.steps li{counter-increment:s;display:grid;grid-template-columns:40px 1fr;gap:14px;align-items:start;padding:14px 0;border-bottom:1px solid var(--line)}
ol.steps li::before{content:counter(s);width:34px;height:34px;border-radius:50%;background:var(--mod);color:#fff;display:grid;place-items:center;font:500 16px/1 var(--body);margin-top:1px}
ol.steps.small li{padding:10px 0}
ol.steps.small li::before{width:28px;height:28px;font-size:14px;background:var(--mod)}
.tbl{overflow-x:auto;margin-top:6px}
table{width:100%;border-collapse:collapse;font-size:16px}
th{font:11px var(--caps);letter-spacing:.16em;text-transform:uppercase;color:var(--mod);text-align:left;padding:12px 10px 8px 0;border-bottom:1px solid var(--sand)}
td{padding:11px 10px 11px 0;border-bottom:1px solid var(--line);vertical-align:top}
td:first-child{color:var(--navy);font-weight:500}

/* demos */
.demo{position:relative;background:var(--tint);padding:clamp(22px,4vw,32px) clamp(18px,4vw,30px);margin-inline:-18px;box-shadow:0 1px 2px color-mix(in srgb,var(--mod) 14%,transparent),0 26px 60px -30px color-mix(in srgb,var(--mod) 45%,transparent)}
.demo h2{border-color:var(--soft)}
.demo .lead{font-size:15.5px;color:var(--mute)}
.demo-box{margin-top:16px}
.ph{position:relative;overflow:hidden;background:#000;aspect-ratio:3/2}
.ph img{width:100%;height:100%;object-fit:cover;display:block;filter:brightness(var(--b,1)) blur(var(--blur,0));transition:filter .35s var(--ease)}
.grain{position:absolute;inset:0;opacity:var(--g,0);mix-blend-mode:overlay;transition:opacity .35s;pointer-events:none}
.ctl{margin-top:14px}
.ctl-top{display:flex;justify-content:space-between;font:11px var(--caps);letter-spacing:.2em;text-transform:uppercase;color:var(--navy)}
.ctl-top b{font:500 16px var(--body);letter-spacing:0;color:var(--mod);text-transform:none}
input[type=range]{width:100%;margin-top:8px;-webkit-appearance:none;appearance:none;height:28px;background:transparent;cursor:pointer}
input[type=range]::-webkit-slider-runnable-track{height:3px;background:var(--soft)}
input[type=range]::-moz-range-track{height:3px;background:var(--soft)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px;border-radius:50%;background:var(--mod);border:4px solid #fff;box-shadow:0 0 0 1px var(--mod);margin-top:-12px;transition:transform .25s var(--ease)}
input[type=range]::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:var(--mod);border:4px solid #fff;box-shadow:0 0 0 1px var(--mod)}
.effects{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;min-height:30px}
.effects span{font:11px var(--caps);letter-spacing:.14em;text-transform:uppercase;padding:7px 10px;border:1px solid var(--sand);background:#fff;color:var(--rust)}
.effects span:empty{display:none}
.effects .good{color:var(--navy);border-color:var(--navy)}
.seg{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.seg button{flex:1 1 auto;padding:11px 12px;border:1px solid var(--soft);background:#fff;color:var(--navy);font:11px var(--caps);letter-spacing:.14em;text-transform:uppercase;cursor:pointer;transition:background-color .3s,color .3s;min-height:44px}
.seg button.on{background:var(--mod);border-color:var(--mod);color:#fff}
.chip{padding:8px 14px;border:1px solid var(--sand);background:#fff;font:11px var(--caps);letter-spacing:.16em;text-transform:uppercase;color:var(--navy);cursor:pointer;min-height:40px}
.row{display:flex;justify-content:space-between;align-items:center;margin-top:10px}
.hint{font:11px var(--caps);letter-spacing:.2em;text-transform:uppercase;color:var(--mute)}
canvas.dark{width:100%;display:block;touch-action:none;cursor:crosshair;aspect-ratio:3/2}
canvas.expo{width:100%;display:block;aspect-ratio:3/2;background:#000}
.histo{width:100%;height:70px;display:block;margin-top:10px;background:#fff;border:1px solid var(--line)}
.histo-lbl{display:flex;justify-content:space-between;font:11px var(--caps);letter-spacing:.16em;text-transform:uppercase;color:var(--mute);margin-top:6px}
.histo-lbl b{color:var(--navy)}
.meterbar{position:relative;height:40px;margin-top:14px;background:repeating-linear-gradient(90deg,var(--navy) 0 2px,transparent 2px 15%) 0 100%/100% 12px no-repeat;border-bottom:2px solid var(--navy)}
.meterbar::before,.meterbar::after{position:absolute;bottom:14px;font:500 18px var(--body);color:var(--navy)}
.meterbar::before{content:"−";left:0}.meterbar::after{content:"+";right:0}
.meterbar b{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);font:500 16px var(--body);color:var(--navy)}
.meterbar i{position:absolute;bottom:-14px;width:0;height:0;border:9px solid transparent;border-bottom:14px solid var(--terra);transform:translateX(-50%);transition:left .45s var(--ease)}
.meterbar.ok i{border-bottom-color:#2f7d4f}
.track{position:relative;overflow:hidden;filter:brightness(var(--b,1));transition:filter .35s}
.track svg{display:block;width:100%}
.dof{position:relative}
.dof .bg{position:absolute;inset:0}
.dof .fg{position:relative;filter:brightness(var(--b,1));-webkit-mask-image:radial-gradient(ellipse 26% 60% at 50% 52%,#000 58%,transparent 82%);mask-image:radial-gradient(ellipse 26% 60% at 50% 52%,#000 58%,transparent 82%)}
.dof .bg{filter:brightness(var(--b,1)) blur(var(--blur,0))}
.dof img{object-position:50% 22%}
.dof .bg{transform:scale(1.12)}
.apwrap{position:relative}
.irisdemo{position:absolute;right:10px;bottom:10px;width:64px;height:64px;filter:drop-shadow(0 2px 6px rgba(0,0,0,.25))}
.crop img{filter:none}
.cropbox{position:absolute;left:16.7%;top:16.7%;width:66.6%;height:66.6%;border:3px dashed #fff;box-shadow:0 0 0 999px rgba(8,30,50,0);transition:opacity .6s var(--ease),box-shadow .6s var(--ease);opacity:0}
.cropbox span{position:absolute;left:8px;top:6px;font:11px var(--caps);letter-spacing:.16em;color:#fff;text-transform:uppercase}
.crop[data-m=crop] .cropbox{opacity:1;box-shadow:0 0 0 999px rgba(8,30,50,.55)}
.crop img{transition:transform .7s var(--ease)}
.crop[data-m=zoom] img{transform:scale(1.5)}
.lightdemo img{filter:brightness(var(--bright,1))}
.lightdemo .tint{position:absolute;inset:0;background:#ff9a3d;mix-blend-mode:soft-light;opacity:calc(var(--warm,0) * .85);transition:opacity .5s}
.lightdemo .glow{position:absolute;inset:0;background:linear-gradient(var(--dir,90deg),rgba(255,230,190,.45),transparent 60%);mix-blend-mode:screen}
.lightdemo[data-m=artificial] .tint{background:#ff7a1a;opacity:.75}
.lightdemo[data-m=artificial] .glow{background:radial-gradient(circle at 85% 20%,rgba(255,190,110,.55),transparent 55%)}
.arc{width:100%;height:60px;display:block;margin-top:8px;transition:opacity .4s}
.arc circle{transition:cx .5s var(--ease),cy .5s var(--ease)}
.cam{width:100%;display:block}
.spot{cursor:pointer}
.spot .pulse{fill:none;stroke:var(--terra);stroke-width:3;transform-box:fill-box;transform-origin:center;animation:pulse 2s ease-out infinite}
.spot.on circle:not(.pulse){fill:var(--navy)}
@keyframes pulse{from{transform:scale(1);opacity:.9}to{transform:scale(2);opacity:0}}
.info{margin-top:10px;padding:14px 16px;background:#fff;border:1px solid var(--blush);min-height:84px}
.info b{display:block;color:var(--navy);font-weight:500}
.info span{display:block;font-size:15.5px;color:var(--mute);margin-top:2px}
.types{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;perspective:900px}
.card3{position:relative;height:210px;border:0;background:none;cursor:pointer;transform-style:preserve-3d;transition:transform .7s var(--ease)}
.card3.flip{transform:rotateY(180deg)}
.face{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:#fff;border:1px solid var(--blush);backface-visibility:hidden;padding:12px}
.face svg{width:52px;height:52px}
.face b{font:500 17px var(--body);color:var(--navy)}
.face.back{transform:rotateY(180deg);background:var(--mod);justify-content:flex-start;overflow-y:auto;gap:6px}
.face.back b{color:#fff}
.face.back small{font-size:13px;line-height:1.4;color:#fff;text-align:center}
.readout{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-top:12px}
.dial{display:grid;grid-template-columns:30px minmax(0,1fr) 30px;align-items:center;background:#fff;border:1px solid var(--blush)}
.dial b{text-align:center;font:500 clamp(12px,3.6vw,15px) var(--body);color:var(--navy);white-space:nowrap;overflow:hidden;text-overflow:clip}
.dial button{height:44px;border:0;background:none;font-size:22px;color:var(--terra);cursor:pointer}
.mnote{font-size:15.5px;margin-top:22px;color:var(--ink)}
.mnote b{color:var(--navy);font-weight:500}
.wf .q{font:500 16px var(--body);color:var(--navy);margin-top:14px}
.wf .q:first-child{margin-top:0}
ol.plan{list-style:none;counter-reset:p;margin-top:16px}
ol.plan li{counter-increment:p;background:#fff;border:1px solid var(--blush);padding:12px 14px 12px 52px;position:relative;margin-top:8px;font-size:15.5px}
ol.plan li::before{content:counter(p);position:absolute;left:14px;top:13px;width:26px;height:26px;border-radius:50%;background:var(--mod);color:#fff;display:grid;place-items:center;font-size:14px}
ol.plan b{display:block;font:11px var(--caps);letter-spacing:.2em;text-transform:uppercase;color:var(--navy)}
.trin{width:100%;display:block}
.trin .corner{cursor:pointer}
.trin .corner circle{transition:fill .3s,r .3s}
.trin .corner.on circle{fill:var(--terra)}
.trin .draw{stroke-dasharray:900;stroke-dashoffset:900;animation:draw 1.6s var(--ease) .2s forwards}
@keyframes draw{to{stroke-dashoffset:0}}

/* photo task */
.task{background:#fff;border:1px solid var(--soft);border-top:4px solid var(--mod);padding:22px 18px 18px;margin-top:40px}
.lbl{font:40px/1 var(--script);color:var(--mod)}
.task h3{font:500 22px/1.25 var(--body);color:var(--navy);margin-top:6px}
.shots{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px;margin-top:16px}
.shot{position:relative;display:block;cursor:pointer}
.frame{position:relative;display:grid;place-items:center;aspect-ratio:4/5;border:1.5px dashed var(--mod);background:var(--tint);overflow:hidden;transition:transform .5s var(--ease),border-color .2s}
.frame:hover{border-color:var(--navy)}
.plus{font:300 38px/1 var(--body);color:var(--mod)}
.frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .4s}
.shot.has .frame{border-style:solid;border-color:var(--sand)}
.shot.has .frame img{opacity:1}
.shot.busy .frame{opacity:.5}
.cap{display:block;font:11px var(--caps);letter-spacing:.14em;text-transform:uppercase;color:var(--navy);margin-top:8px;text-align:center}
.rm{position:absolute;top:6px;right:6px;width:30px;height:30px;border-radius:50%;border:0;background:rgba(255,255,255,.9);color:var(--navy);font-size:18px;line-height:1;cursor:pointer;display:none}
.shot.has .rm{display:block}
.taskdone{margin-top:14px;color:var(--navy);font-weight:500}
.taskdone a{color:var(--terra)}

/* reflect + finish */
.reflect{margin-top:40px;text-align:center}
.reflect p{font:italic 19px/1.55 var(--body);color:var(--navy);margin-top:6px;text-wrap:balance}
textarea{width:100%;margin-top:16px;min-height:96px;padding:14px;font:16px/1.6 var(--body);color:var(--ink);border:1px solid var(--sand);background:#fff;resize:vertical;transition:border-color .3s,box-shadow .3s}
textarea::placeholder{color:#a99f98;font-style:italic}
.done{display:flex;flex-direction:column;align-items:center;gap:12px;margin:40px 0 28px}
.btn{position:relative;overflow:hidden;isolation:isolate;font:12px var(--caps);letter-spacing:.24em;text-transform:uppercase;padding:18px 28px;border:1px solid var(--mod);background:transparent;color:#fff;cursor:pointer;min-width:260px;transition:color .45s var(--ease),transform .2s var(--ease)}
.next{display:grid;grid-template-columns:1fr auto;gap:2px 16px;align-items:center;margin:8px 0 28px;padding:22px 4px;border-block:1px solid var(--soft);font:500 clamp(21px,4.6vw,27px)/1.2 var(--body);color:var(--navy);text-decoration:none;min-height:44px}
.legal{font-size:11px;line-height:1.5;color:#a99f98;text-align:center;padding:24px 0 36px;border-top:1px solid var(--line);margin-top:24px}

/* contents */
.lesson{display:grid;grid-template-columns:34px 1fr 24px;gap:10px;align-items:center;padding:16px 6px;border-bottom:1px solid var(--line);text-decoration:none;color:var(--navy);font-weight:500;transition:background-color .35s}

.reveal{opacity:0;transform:translateY(16px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.reveal,.pop{opacity:1;transform:none}.trin .draw{stroke-dashoffset:0}}

/* chapter bands in the module color, one light beam, hairlines that draw in */
@view-transition{navigation:auto}
body{overflow-x:clip}
.band{position:relative;overflow:hidden;width:100vw;margin-inline:calc(50% - 50vw);background:var(--mod);color:#fff;text-align:center;padding:clamp(52px,11vw,96px) 22px clamp(44px,8vw,72px)}
.band::before{content:"";position:absolute;inset:-20% -60%;z-index:1;pointer-events:none;background:linear-gradient(105deg,transparent 20%,rgba(255,232,204,.13) 50%,transparent 80%);animation:beam 11s ease-in-out infinite alternate}
@keyframes beam{from{transform:translateX(-24%)}to{transform:translateX(24%)}}
.band .in{position:relative;z-index:2;max-width:760px;margin-inline:auto}
.band .kicker{color:#fff;opacity:0;animation:fade 1s var(--ease) .1s forwards}
.band h1{color:#fff;font-size:clamp(38px,8.4vw,66px);line-height:1.04;margin-top:14px}
.w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.12em;margin-bottom:-.12em}
.w i{display:inline-block;font-style:normal;animation:wordup 1.1s var(--ease) both;animation-delay:calc(.18s + var(--i) * 70ms)}
@keyframes wordup{from{transform:translateY(105%)}}
.band .sub{color:#fff;font-size:clamp(30px,6.4vw,44px);margin-top:12px;opacity:0;animation:fade 1.2s var(--ease) .62s forwards}
@keyframes fade{from{opacity:0;transform:translateY(10px)}to{opacity:.96;transform:none}}
@supports (animation-timeline:scroll()){.band .in{animation:lift linear both;animation-timeline:scroll();animation-range:0 420px}}
@keyframes lift{to{transform:translateY(46px);opacity:.25}}

.cover{min-height:min(78svh,620px);display:grid;align-items:end;background:#07304c;padding-bottom:clamp(30px,6vw,46px)}
.cover::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(to top,#07304c 8%,rgba(7,48,76,.82) 34%,rgba(7,48,76,0) 66%)}
.cover .in{width:100%}
.cover .drift{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 22%;animation:drift 26s ease-in-out infinite alternate}
@keyframes drift{from{transform:scale(1.02)}to{transform:scale(1.13) translateY(-1.5%)}}
.overall{display:grid;grid-template-columns:1fr 1fr;gap:10px;max-width:340px;margin:30px auto 0;font:11px var(--caps);letter-spacing:.16em;text-transform:uppercase;opacity:0;animation:fade 1.2s var(--ease) .8s forwards}
.overall span:last-of-type{text-align:right}
.overall i{grid-column:1/-1;display:block;height:2px;background:rgba(255,255,255,.3);position:relative;overflow:hidden}
.overall i::after{content:"";position:absolute;inset:0;background:#fff;transform-origin:0 50%;transform:scaleX(var(--p));animation:grow 1.6s var(--ease) 1s both}
@keyframes grow{from{transform:scaleX(0)}}

.modules{margin-top:clamp(28px,6vw,48px);padding-bottom:64px}
.mod{margin-top:clamp(26px,5vw,40px)}
.modhead{position:relative;overflow:hidden;display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:center;background:var(--c);color:#fff;padding:22px 22px 20px}
.modhead::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 40%,rgba(255,232,204,.22) 50%,transparent 60%);transform:translateX(-100%);transition:transform 1.8s var(--ease) .2s}
.mod.in .modhead::after{transform:translateX(100%)}
.modhead b{font:400 clamp(38px,8vw,52px)/1 var(--body);min-width:1.2em;text-align:center;opacity:.95}
.modhead h2{font:500 clamp(21px,4.6vw,27px)/1.15 var(--body);letter-spacing:-.01em;text-transform:none;color:#fff;padding:0;border:0;display:block}
.modhead em{display:block;font:clamp(23px,5vw,28px)/1.1 var(--script);color:#fff;opacity:.92;margin-top:3px;text-align:left}
.lesson .no{font:500 24px/1 var(--body);color:var(--c)}
.lesson .t small{display:block;font:italic 400 14.5px/1.35 var(--body);color:var(--mute);margin-top:2px}
.lesson .ok{color:var(--c);font-size:18px;text-align:right;transition:transform .5s var(--ease)}
.lesson:hover{color:var(--navy);background:color-mix(in srgb,var(--c) 6%,#fff)}
.lesson:hover .ok{transform:translateX(5px)}
.lesson:active{background:color-mix(in srgb,var(--c) 12%,#fff)}

.intro::first-letter{float:left;font:500 3.35em/.84 var(--body);color:var(--mod);padding:.06em .05em 0 0}
#lesson > section:not(.demo):not(.task):not(.mod) h2,.demo h2{position:relative;border-bottom:0;color:var(--mod)}
#lesson > section:not(.demo):not(.task):not(.mod) h2::after,.demo h2::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--soft);transform-origin:0 50%;transform:scaleX(0);transition:transform 1.3s var(--ease) .12s}
.reveal.in h2::after{transform:scaleX(1)}
.reveal>ul.rows>li,.reveal>ol.steps>li{opacity:0;transform:translateY(10px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.in>ul.rows>li,.reveal.in>ol.steps>li{opacity:1;transform:none}
.reveal>*>li:nth-child(1){transition-delay:.12s}.reveal>*>li:nth-child(2){transition-delay:.19s}.reveal>*>li:nth-child(3){transition-delay:.26s}.reveal>*>li:nth-child(4){transition-delay:.33s}.reveal>*>li:nth-child(n+5){transition-delay:.4s}
input[type=range]:active::-webkit-slider-thumb{transform:scale(1.18)}
.shot:hover .frame{transform:translateY(-3px)}
.shot:active .frame{transform:translateY(0)}
textarea:focus{outline:0;border-color:var(--mod);box-shadow:0 0 0 3px color-mix(in srgb,var(--mod) 16%,transparent)}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--mod);transform-origin:100% 50%;transition:transform .7s var(--ease)}
.btn:active{transform:scale(.985)}
.btn.on,.btn.on:hover{background:transparent;color:var(--mod)}
.btn.on::before{transform:scaleX(0)}
.next small{grid-column:1/-1;font:11px var(--caps);letter-spacing:.24em;text-transform:uppercase;color:var(--mod)}
.next i{font-style:normal;color:var(--mod);transition:transform .5s var(--ease)}
.next:hover i{transform:translateX(8px)}
@media (max-width:520px){table{font-size:14.5px}th{letter-spacing:.08em}td,th{padding-right:8px}}
@media (max-width:520px){.topnav{gap:11px;padding-inline:8px}.topnav a{font-size:9.5px;letter-spacing:.05em}}
@media (prefers-reduced-motion:reduce){.band .kicker,.band .sub,.overall{opacity:.96}@view-transition{navigation:none}.band .in{animation:none}}

/* policy pages + their links */
.sitelinks{text-align:center;font-size:13px;color:var(--mute);margin-top:40px}
.sitelinks a{color:var(--mute)}
.policy{padding-bottom:64px}
.policy .updated{margin-top:28px;font-size:14px;color:var(--mute)}
.policy ul{margin:10px 0 0 20px}
.policy li{margin-top:6px}
.policy a{color:var(--navy)}
.policy h2{margin-top:6px;color:var(--mod);border-color:var(--soft)}