/* Los Niños — one product, one continuous photographic journey. */
:root{color-scheme:dark;--journey-ink:#080f19;--journey-paper:#eeece5;--journey-muted:#a8b1bd;--journey-line:#ffffff26;--header-height:calc(80px + env(safe-area-inset-top,0px));--hat-size:min(92vw,80svh,900px);--hero-top:0px;--ease:cubic-bezier(.22,1,.36,1);font-family:'DM Sans',Arial,sans-serif;background:var(--journey-ink);color:var(--journey-paper)}
*{box-sizing:border-box}html{scrollbar-gutter:stable;scroll-padding-top:0}body{margin:0}button,a{-webkit-tap-highlight-color:transparent;touch-action:manipulation}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}button:disabled{cursor:default}button:focus-visible,a:focus-visible{outline:2px solid currentColor;outline-offset:5px}[hidden]{display:none!important}h1:focus,h2:focus{outline:none}figure,p{margin:0}img,svg{display:block}.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}.filter-definitions{position:absolute;width:0;height:0;overflow:hidden}
.skip-link{position:fixed;z-index:200;left:20px;top:12px;padding:14px 18px;background:var(--journey-paper);color:var(--journey-ink);transform:translateY(-160%)}.skip-link:focus{transform:none}
/* A compact header with the brand and bag. */
.journey-header{height:var(--header-height);padding:14px clamp(24px,5vw,80px);display:flex;align-items:center;gap:44px;position:sticky;top:0;z-index:30;background:var(--journey-ink);color:var(--journey-paper);border-bottom:1px solid transparent;transition:background 220ms ease,color 220ms ease,border-color 220ms ease}
.journey-mark{display:grid;place-items:center;width:58px;min-height:44px;transition:opacity 180ms ease}.journey-mark:hover{opacity:.7}.journey-mark svg{width:52px;height:36px}
.quiet-link{position:relative;font-size:13px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:8px 0}.quiet-link:after{content:'';position:absolute;left:0;right:0;bottom:8px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform 320ms var(--ease)}.quiet-link:hover:after,.quiet-link:focus-visible:after{transform:scaleX(1);transform-origin:left}.quiet-link>span{transition:transform 320ms var(--ease)}.quiet-link:hover>span{transform:translate(2px,-2px)}
.journey-bag-trigger{margin-left:auto;display:inline-flex;gap:12px;align-items:center;min-height:44px;padding:0;font-size:13px}.bag-count{display:grid;place-items:center;width:29px;height:29px;border:1px solid #ffffff40;border-radius:50%;font-size:11px;font-variant-numeric:tabular-nums;transition:background 220ms ease,color 220ms ease,transform 320ms var(--ease)}.journey-bag-trigger:hover .bag-count,.journey-bag-trigger:focus-visible .bag-count{background:var(--journey-paper);color:var(--journey-ink);transform:translateY(-2px)}
.journey-header.is-on-paper{background:var(--journey-paper);color:var(--journey-ink);border-color:#080f191a}.is-on-paper .journey-mark svg{filter:brightness(0)}.is-on-paper .bag-count{border-color:#080f1940}.is-on-paper .journey-bag-trigger:hover .bag-count,.is-on-paper .journey-bag-trigger:focus-visible .bag-count{background:var(--journey-ink);color:var(--journey-paper)}
/* Keep the original large stitched opening and its upward handoff. */
.hero{position:relative;isolation:isolate;min-height:calc(100svh - var(--header-height));padding:0 clamp(24px,5vw,80px) 32px;display:flex;align-items:center;flex-direction:column;background:var(--journey-ink);scroll-margin-top:var(--header-height)}
.studio-glow{position:absolute;inset:0;z-index:-1;background:none;pointer-events:none}.hat-figure{width:100%;display:flex;justify-content:center}.viewer-frame{position:relative;width:var(--hat-size);flex:none;aspect-ratio:25/21;isolation:isolate;overflow:clip;transform:translateY(calc(var(--opening-offset) * var(--arrival,0)));--opening-offset:max(0px,calc(50svh - var(--header-height) - var(--hero-top) - var(--hat-size) * .42))}.product-lockup{position:absolute;width:100%;aspect-ratio:1;left:50%;top:50%;transform:translate(-50.32%,-51.83%);transform-origin:50.32% 51.83%}.product-lockup img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}.hero-hat{opacity:1}.intro-pending .viewer-frame{--arrival:1}.intro-pending .hero-hat{opacity:0}
.product-interface{opacity:1;transform:none;transition:opacity 600ms var(--ease),transform 700ms var(--ease)}.intro-pending .product-interface{opacity:0;visibility:hidden;transform:translateY(14px)}.skip-intro{position:absolute;right:5vw;top:8px;z-index:4;color:var(--journey-muted)}
.purchase-row{width:min(100%,1040px);display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:48px;align-items:center;margin-top:-16px;padding-top:22px;scroll-margin-top:calc(var(--header-height) + 24px)}.eyebrow{font-size:11px;font-weight:500;letter-spacing:.13em;line-height:1.5;text-transform:uppercase}
.add-button{border-radius:14px;position:relative;isolation:isolate;overflow:hidden;display:flex;justify-content:space-between;align-items:center;gap:24px;width:100%;min-height:62px;padding:12px 16px 12px 23px;background:var(--journey-paper);color:var(--journey-ink);font-size:14px;font-weight:500;text-align:left;transition:transform 180ms var(--ease)}.add-button:before{content:'';position:absolute;inset:0;z-index:-1;background:#d1ddd9;transform:translateY(102%);transition:transform 450ms var(--ease)}.add-button:hover:before,.add-button:focus-visible:before{transform:translateY(0)}.add-button:active{transform:translateY(2px)}.add-symbol{display:grid;place-items:center;width:34px;height:34px;border:1px solid #080f1940;border-radius:50%;font-size:23px;font-weight:400;line-height:1;transition:transform 450ms var(--ease),background 250ms ease,color 250ms ease}.add-button:hover .add-symbol{transform:rotate(90deg);background:var(--journey-ink);color:var(--journey-paper)}[data-bag-pending] .add-symbol{font-size:0;transform:none!important;background:var(--journey-ink);color:var(--journey-paper)}[data-bag-pending] .add-symbol:before{content:'✓';font-size:16px}
.story-cue{display:flex;align-items:center;gap:22px;min-height:66px;padding:10px 0;margin-top:0;color:var(--journey-paper)}.cue-copy{display:grid;gap:5px}.cue-title{font-size:20px;line-height:1.2;letter-spacing:-.35px}.cue-description{font-size:12px;line-height:1.5;color:var(--journey-muted)}.cue-arrow{display:grid;place-items:center;flex:none;width:42px;height:42px;border:1px solid #ffffff40;border-radius:50%;font-size:21px;transition:transform 350ms var(--ease),border-color 220ms ease,background 220ms ease}.story-cue:hover .cue-arrow,.story-cue:focus-visible .cue-arrow{transform:translateY(4px);border-color:currentColor;background:#ffffff0b}
.intro-complete .product-explore{animation:interface-arrive 650ms var(--ease) both}.intro-complete .purchase-action{animation:interface-arrive 750ms 90ms var(--ease) both}
@keyframes interface-arrive{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
/* Photographs form one editorial sequence, not a grid of cards. */
.journey-worn{background:var(--journey-paper);color:var(--journey-ink);padding:clamp(48px,8vw,112px) clamp(24px,6vw,100px) 0;scroll-margin-top:var(--header-height)}.worn-heading{max-width:1240px;margin:0 auto 45px;display:flex;align-items:flex-end;justify-content:space-between;gap:32px}.worn-heading .eyebrow{margin-bottom:22px;color:#5e666c}.worn-heading h2{margin:0;font-weight:400;font-size:clamp(52px,7.8vw,112px);line-height:.94;letter-spacing:-.055em}.chapter-label{font-size:11px;letter-spacing:.09em;line-height:1.65;text-align:right;padding-bottom:6px}
.photo-slot{position:relative;background:#deded6;overflow:hidden}.photo-slot>img{display:block;width:100%;height:auto;object-fit:cover}.worn-lead{max-width:1240px;margin:0 auto;aspect-ratio:1.5}.worn-lead>img{height:100%;object-position:center top}.worn-pair{max-width:1120px;margin:0 auto;display:grid;grid-template-columns:1fr .82fr;gap:clamp(28px,7vw,100px);padding-top:clamp(40px,7vw,100px);align-items:start}.worn-pair .photo-slot:last-child{margin-top:22%}.worn-pair .photo-slot{aspect-ratio:1067/1600}.worn-pair img{height:100%;object-position:center top}
[data-reveal]{transition:opacity 900ms var(--ease),transform 1100ms var(--ease)}.reveal-pending{opacity:0;transform:translateY(32px)}.reveal-pending.is-visible{opacity:1;transform:none}
.journey-ending{max-width:1240px;margin:0 auto;padding:clamp(70px,10vw,150px) 0 clamp(60px,8vw,110px)}.closing-shop{display:flex;align-items:center;justify-content:space-between;gap:30px;font-size:clamp(40px,7vw,94px);font-weight:400;letter-spacing:-.055em;line-height:1.05}.closing-arrow{display:grid;place-items:center;flex:none;width:clamp(52px,7vw,92px);height:clamp(52px,7vw,92px);border:1px solid #080f1935;border-radius:50%;font-size:.62em;letter-spacing:0;transition:background 350ms ease,color 350ms ease,transform 500ms var(--ease)}.closing-shop:hover .closing-arrow,.closing-shop:focus-visible .closing-arrow{background:var(--journey-ink);color:var(--journey-paper);transform:scale(1.035)}
.journey-footer{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:32px clamp(24px,6vw,100px);background:var(--journey-paper);color:var(--journey-ink)}.footer-brand{font-size:21px;font-weight:600;line-height:.95;letter-spacing:-.7px;display:flex;flex-direction:column;gap:7px;min-height:44px;justify-content:center}.footer-brand span{font-size:9px;letter-spacing:.15em;font-weight:400}
.view-error{position:absolute;z-index:5;inset:15px;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;background:#080f19e8;color:var(--journey-paper);font-size:14px;padding:20px;gap:12px}.viewer-frame.has-good-image .view-error{inset:auto 12px 22px;padding:12px}.photo-error{position:absolute;inset:0;display:flex;justify-content:center;align-items:center;flex-direction:column;gap:12px;padding:24px;font-size:14px;text-align:center;background:#deded6}.noscript-note{padding:20px;background:var(--journey-paper);color:var(--journey-ink);font-size:14px}
@media(max-width:700px){:root{--header-height:calc(72px + env(safe-area-inset-top,0px));--hat-size:min(96vw,80svh,calc(100vw - 20px));--hero-top:24px}.journey-header{padding:12px 24px;gap:25px}.journey-mark{width:45px}.journey-mark svg{width:43px;height:31px}.quiet-link,.journey-bag-trigger{font-size:12px}.journey-bag-trigger{gap:7px}.bag-count{width:26px;height:26px}.hero{min-height:calc(100svh - var(--header-height));padding:var(--hero-top) 24px max(24px,env(safe-area-inset-bottom))}.hat-figure{flex:1;align-items:center}.purchase-row{grid-template-columns:1fr;gap:24px;max-width:480px;margin-top:0;padding-top:24px}.add-button{min-height:60px}.story-cue{margin-top:0;min-height:44px}.skip-intro{right:24px;top:0}.journey-worn{padding:52px 24px 0}.worn-heading{margin-bottom:30px;gap:20px}.worn-heading .eyebrow{font-size:10px;margin-bottom:18px}.worn-heading h2{font-size:60px}.chapter-label{font-size:9px;letter-spacing:.06em}.worn-lead{width:calc(100% + 48px);max-width:none;margin-left:-24px;aspect-ratio:1.05}.worn-lead>img{object-position:50% 0%}.worn-pair{grid-template-columns:1fr;gap:36px;padding-top:36px}.worn-pair .photo-slot:last-child{margin-top:0;width:88%;margin-left:auto}.journey-ending{padding:66px 0 60px}.closing-shop{font-size:44px;gap:16px}.closing-arrow{width:51px;height:51px}.journey-footer{padding:28px 24px}.footer-brand{font-size:19px}}
@media(min-width:560px) and (max-width:700px){.purchase-row{grid-template-columns:1fr 200px;max-width:560px;gap:24px}.worn-heading h2{font-size:76px}}
@media(max-width:350px){.journey-header{padding-inline:18px;gap:20px}.hero{padding-inline:18px}.worn-heading h2{font-size:50px}.chapter-label{font-size:8px}.closing-shop{font-size:36px}.closing-arrow{width:45px;height:45px}}
@media(max-height:500px) and (min-width:701px){.hero{min-height:0}.purchase-row{max-width:860px}.journey-header{--header-height:64px;height:64px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important;animation:none!important}.intro-pending .product-interface{opacity:1;visibility:visible;transform:none}.intro-pending .hero-hat{opacity:1}.sewing-drawing,.lettering-window,.hat-key-light{display:none}.reveal-pending{opacity:1;transform:none}}

.add-button:focus-visible{outline-color:var(--journey-paper)}
@media(min-width:701px) and (max-height:800px){.story-cue{margin-top:0;min-height:40px}}
@media(max-width:700px){.worn-heading{display:block}.chapter-label{display:none}}
/* Embroidery drawing and studio-light layers. */
.lettering-window{position:absolute;inset:0;clip-path:inset(37% 28% 35% 28%);pointer-events:none;opacity:0}.thread-sheen{position:absolute;inset:0;opacity:0;filter:brightness(1.35)}/* Embroidery pixels are pre-rendered so the SVG mask does not rerun a filter per frame. */.sewing-drawing{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;opacity:0}.sew-path{opacity:0;fill:none;stroke:#fff;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1}.sew-satin{fill:none;stroke:#f6f5f1;stroke-width:1.35;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;opacity:0}.working-thread{fill:none;stroke:#ecebe7;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;opacity:0;filter:drop-shadow(0 1px 1px #0008)}.sewing-head{opacity:0}.sewing-head line{stroke:#b8c1cc;stroke-width:1.6;stroke-linecap:round}.sewing-head circle{fill:#f6f5f1}.sewing-head .needle-eye{fill:#05070b;stroke:#c4cbd4;stroke-width:.65}.sew-finish{fill:#fff;stroke:#fff;stroke-width:8;stroke-linejoin:round;opacity:0}.hat-key-light{opacity:0;pointer-events:none;mix-blend-mode:screen;filter:brightness(1.4)}.intro-complete .sewing-drawing,.intro-complete .lettering-window,.intro-complete .hat-key-light{display:none}

/* Keep the opening fixed while its assets prepare and its four-second film plays. */
html.intro-pending,html.intro-pending body{overflow:hidden;overscroll-behavior:none;touch-action:none}
/* A drawn pointer connects the invitation directly to the buying action. */
.product-explore{min-width:0}.product-explore .story-cue{width:max-content;max-width:100%}
.purchase-invitation{display:flex;justify-content:center;align-items:flex-start;gap:8px;min-height:56px;padding-left:10px;font-size:15px;line-height:1.4;color:var(--journey-paper)}.purchase-invitation>span{padding-top:5px}.buy-pointer{width:64px;height:49px;flex:none;overflow:visible;transition:transform 550ms var(--ease)}.buy-pointer path{fill:none;stroke:currentColor;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:0}
/* The curve draws once, then gives two quiet downward cues. */
.intro-complete .buy-pointer-stem{animation:draw-buy-pointer 850ms 200ms var(--ease) both,point-to-bag 2200ms 1300ms ease-in-out 2}
.intro-complete .buy-pointer-tip{animation:draw-buy-pointer 350ms 800ms var(--ease) both,point-to-bag 2200ms 1300ms ease-in-out 2}
.purchase-action:has(.add-button:is(.is-pointing,:focus-visible)) .buy-pointer{transform:translate(2px,3px)}
@keyframes draw-buy-pointer{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes point-to-bag{0%,35%,100%{transform:translateY(0)}55%{transform:translateY(3px)}75%{transform:translateY(0)}}
@media(max-width:559px){.purchase-row{gap:14px}.purchase-invitation{justify-content:flex-end;padding-right:16px}.product-explore .story-cue{min-height:60px}}
@media(prefers-reduced-motion:reduce){.intro-complete .buy-pointer,.intro-complete .buy-pointer path{animation:none!important;transform:none;stroke-dashoffset:0}}

.closing-arrow svg{width:46%;height:46%;overflow:visible;transition:transform 400ms var(--ease)}.closing-shop:hover .closing-arrow svg,.closing-shop:focus-visible .closing-arrow svg{transform:translate(2px,-2px)}
.instagram-link{display:grid;place-items:center;flex:none;width:44px;height:44px;border-radius:50%;transition:background 220ms ease,transform 320ms var(--ease)}.instagram-link svg{width:25px;height:25px}.instagram-link:hover,.instagram-link:focus-visible{background:#080f190a;transform:translateY(-2px)}

/* Keep controls inside iPhone cutouts in either orientation. */
.journey-header{padding-top:calc(14px + env(safe-area-inset-top,0px));padding-left:max(clamp(24px,5vw,80px),env(safe-area-inset-left,0px));padding-right:max(clamp(24px,5vw,80px),env(safe-area-inset-right,0px))}
.hero{padding-left:max(clamp(24px,5vw,80px),env(safe-area-inset-left,0px));padding-right:max(clamp(24px,5vw,80px),env(safe-area-inset-right,0px))}
.journey-worn,.journey-footer{padding-left:max(clamp(24px,6vw,100px),env(safe-area-inset-left,0px));padding-right:max(clamp(24px,6vw,100px),env(safe-area-inset-right,0px))}
.journey-footer{padding-bottom:max(28px,env(safe-area-inset-bottom,0px))}
.skip-intro{display:none;min-height:44px;min-width:72px}.intro-pending .skip-intro{display:inline-flex}
@media(max-width:700px){.journey-header{padding-top:calc(12px + env(safe-area-inset-top,0px))}.hero,.journey-worn,.journey-footer{padding-left:max(24px,env(safe-area-inset-left,0px));padding-right:max(24px,env(safe-area-inset-right,0px))}}
/* Keep the controls in Safari's small viewport. Extend the dark surface beyond
   the large viewport, since translucent browser chrome can reveal content below
   its edge. Matching height and padding additions leave the controls in place. */
@media(max-width:700px){.hero{min-height:calc(100lvh - var(--header-height) + 96px);padding-bottom:calc(max(24px,env(safe-area-inset-bottom,0px)) + max(0px,100lvh - 100svh) + 96px)}}
/* The single-column invitation, explore link and button need 225px. Let the
   hat shrink on shorter screens before the buying action falls below the bar. */
@media(max-width:559px){:root{--hat-size:min(96vw,80svh,calc(100vw - 20px),max(100px,calc((100svh - var(--header-height) - var(--hero-top) - max(24px,env(safe-area-inset-bottom,0px)) - 225px) / .84)))}}
@media(max-height:500px) and (min-width:701px){:root{--header-height:calc(64px + env(safe-area-inset-top,0px))}.journey-header{--header-height:calc(64px + env(safe-area-inset-top,0px));height:var(--header-height);padding-block:calc(10px + env(safe-area-inset-top,0px)) 10px}}
@media(hover:none){.journey-mark:hover{opacity:1}.quiet-link:hover:after{transform:scaleX(0)}.quiet-link:hover>span,.journey-bag-trigger:hover .bag-count,.story-cue:hover .cue-arrow,.closing-shop:hover .closing-arrow,.closing-shop:hover .closing-arrow svg,.instagram-link:hover{transform:none}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.intro-pending .viewer-frame{transform:none}.skip-intro{display:none!important}.quiet-link>span,.bag-count,.cue-arrow,.closing-arrow,.closing-arrow svg,.instagram-link,.buy-pointer{transform:none!important}}