/* 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:center;gap:clamp(14px,5vw,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)}}
.stats{display:flex;justify-content:center;gap:24px;margin-top:18px;font:12px var(--caps);letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}
.stats b{font:500 18px var(--body);color:var(--navy);letter-spacing:0;margin-right:4px}

/* verse */
.verse{position:relative;overflow:hidden;text-align:center;padding:28px 8px;border-bottom:1px solid var(--sand)}
.verse q{display:block;font:italic clamp(19px,4.4vw,23px)/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(--terra);font-style:normal;text-transform:uppercase}
.verse::after{content:"";position:absolute;inset:-20% auto -20% -40%;width:35%;background:linear-gradient(100deg,transparent,rgba(255,236,214,.75),transparent);animation:sweep 2.6s var(--ease) .7s both}
@keyframes sweep{to{transform:translateX(480%)}}

.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;min-width:420px}
th{font:11px var(--caps);letter-spacing:.16em;text-transform:uppercase;color:var(--terra);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{background:var(--tint);border-block:1px solid var(--soft);padding:22px 18px 20px;margin-inline:-18px}
.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(--terra);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(--sand)}
input[type=range]::-moz-range-track{height:3px;background:var(--sand)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px;border-radius:50%;background:var(--navy);border:4px solid #fff;box-shadow:0 0 0 1px var(--navy);margin-top:-12px}
input[type=range]::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:var(--navy);border:4px solid #fff;box-shadow:0 0 0 1px var(--navy)}
.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(--navy);background:#fff;color:var(--navy);font:11px var(--caps);letter-spacing:.14em;text-transform:uppercase;cursor:pointer;transition:background .25s var(--ease),color .25s var(--ease);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))}
.irisdemo polygon{transition:all .35s var(--ease)}
.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:all .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;transition:all .5s}
.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(--terra);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: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}
textarea::placeholder{color:#a99f98;font-style:italic}
.done{display:flex;flex-direction:column;align-items:center;gap:12px;margin:44px 0 18px}
.btn{font:12px var(--caps);letter-spacing:.24em;text-transform:uppercase;padding:18px 28px;border:1px solid var(--navy);background:var(--navy);color:#fff;cursor:pointer;min-width:260px;transition:background .25s var(--ease),color .25s var(--ease)}
.btn:hover,.btn.on{background:#fff;color:var(--navy)}
.next{font:12px var(--caps);letter-spacing:.2em;text-transform:uppercase;color:var(--navy);text-decoration:none;padding:10px;text-align:center}
.next:hover{color:var(--terra)}
.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 */
.mod{margin-top:30px}
.mod h2{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.mod h2 span{white-space:nowrap}
.mod h2 em{font:28px/1 var(--script);color:var(--c,var(--terra));text-transform:none;letter-spacing:0;text-align:right}
.lesson{display:grid;grid-template-columns:36px 1fr auto;gap:10px;align-items:center;padding:14px 0;border-bottom:1px solid var(--line);text-decoration:none;color:var(--navy);font-weight:500}
.lesson .no{font:500 26px/1 var(--body);color:var(--c,var(--terra))}
.mod h2{border-bottom:2px solid var(--c,var(--line))}
.lesson .ok{color:var(--terra);font-size:18px}
.lesson:hover{color:var(--terra)}
#lesson > .mod:last-child{margin-bottom:56px}

.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}.verse::after{display:none}.trin .draw{stroke-dashoffset:0}}