/* Lobos site. Look: company/brand/logo/current/README.md; parts taken from company/site/lobos-v11/dist/styles.css. */
@font-face{font-family:Geist;src:url(fonts/geist-400.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Geist;src:url(fonts/geist-500.woff2) format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:Geist;src:url(fonts/geist-600.woff2) format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Geist Mono';src:url(fonts/geist-mono.woff2) format('woff2');font-weight:400;font-display:swap}

:root{
  --paper:#f8f8f7;--paper-2:#efefed;--card:#fff;--ink:#0e0f10;--ink-2:#26282b;
  --muted:#56595e;--quiet:#66696d;--gray:#6e7175;--line:#e2e2df;--line-2:#cfcfcb;
  --accent:#f0703a;--accent-hover:#e4622c;
  --sans:Geist,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  --mono:'Geist Mono',ui-monospace,"SF Mono",Menlo,monospace;
  --gut:40px;--max:1200px;--head:68px
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 16px/1.6 var(--sans);-webkit-font-smoothing:antialiased}
h1,h2,h3,p,ol,ul,figure{margin:0}
ol,ul{padding:0;list-style:none}
a{color:inherit;text-decoration:none}
img,video{display:block;max-width:100%;height:auto}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.wrap{width:min(var(--max),calc(100% - 2*var(--gut)));margin-inline:auto}
.skip{position:absolute;left:16px;top:-60px;z-index:60;background:var(--ink);color:#fff;padding:10px 14px}
.skip:focus{top:12px}
[data-line]{white-space:nowrap}
.ln{display:block}
.q{color:var(--gray)}

/* type */
h1{font-weight:600;letter-spacing:-.05em;line-height:.98}
h2{font-size:clamp(30px,4.4vw,56px);font-weight:600;letter-spacing:-.045em;line-height:1.02;text-wrap:balance}
h3{font-size:19px;font-weight:600;letter-spacing:-.02em;line-height:1.3}
p{color:var(--muted)}
.sub{font-size:clamp(17px,1.6vw,20px);line-height:1.5;color:var(--ink-2);max-width:44ch;text-wrap:pretty}
.cap{font:400 12px/1.4 var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--quiet)}

/* presses: dark with the orange arrow box */
.btn{display:inline-flex;align-items:center;gap:16px;height:48px;padding:0 6px 0 20px;background:var(--ink);color:#fff;font:500 15px/1 var(--sans);letter-spacing:-.01em;white-space:nowrap;border-radius:2px}
.btn .ar{display:grid;place-items:center;width:36px;height:36px;background:var(--accent);color:var(--ink);border-radius:1px}
.btn svg{width:16px;height:16px;transition:transform .15s}
.btn:hover svg,a:hover>.btn svg{transform:translateX(2px)}
.btn-line{background:var(--card);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line-2)}
.btn-line .ar{background:var(--ink);color:#fff}
.btn-orange{background:var(--accent);color:var(--ink)}
.btn-orange:hover{background:var(--accent-hover)}
.btn-orange .ar{background:var(--ink);color:var(--accent)}
.btn-sm{height:44px;padding-left:16px;gap:14px;font-size:14px}
.btn-sm .ar{width:32px;height:32px}
.acts{display:flex;flex-wrap:wrap;gap:12px}

/* header */
.top{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--paper) 96%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;height:var(--head)}
.mark{display:block;flex:none}
.mark svg{display:block;height:22px;width:auto}
.nav{display:flex;align-items:center;gap:28px}
.nav>a:not(.btn){font-size:15px;font-weight:500;color:var(--ink-2)}
.nav>a:not(.btn):hover,.nav>a[aria-current]{color:var(--ink)}
.nav>a[aria-current]:not(.btn){text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:1px}

/* figure cards: corner brackets and a Fig. caption */
.fig{position:relative;background:var(--card);border:1px solid var(--line);padding:18px}
.fig::before{content:"";position:absolute;inset:6px;pointer-events:none;--c:var(--ink);background:
  linear-gradient(var(--c),var(--c)) 0 0/10px 1.5px,linear-gradient(var(--c),var(--c)) 0 0/1.5px 10px,
  linear-gradient(var(--c),var(--c)) 100% 0/10px 1.5px,linear-gradient(var(--c),var(--c)) 100% 0/1.5px 10px,
  linear-gradient(var(--c),var(--c)) 0 100%/10px 1.5px,linear-gradient(var(--c),var(--c)) 0 100%/1.5px 10px,
  linear-gradient(var(--c),var(--c)) 100% 100%/10px 1.5px,linear-gradient(var(--c),var(--c)) 100% 100%/1.5px 10px;background-repeat:no-repeat}
.fig img,.fig video{width:100%;background:var(--paper-2)}
.fig figcaption,.fig .cap{display:block;margin-top:14px}

/* home */
.hero{padding:clamp(48px,7vw,96px) 0 clamp(40px,5vw,64px)}
.hero h1{font-size:clamp(44px,12.5vw,132px)}
.hero .sub{margin-top:clamp(24px,3vw,36px)}
@media (min-width:900px){.hero .wrap{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:48px;align-items:end}.hero h1{font-size:min(7.4vw,108px)}.hero .sub{margin:0 0 10px}}
.lines{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.lines.one{grid-template-columns:minmax(0,1fr)}
@media (min-width:900px){
  .lines.one .card{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);grid-template-rows:1fr auto auto auto;column-gap:clamp(32px,4vw,56px)}
  .lines.one .card img{grid-row:1/5}
  .lines.one .card>:not(img){grid-column:2}
  .lines.one .card .cap{grid-row:2;margin:0}
  .lines.one .card h3{grid-row:3;font-size:clamp(28px,3.4vw,46px)}
  .lines.one .card .btn{grid-row:4;justify-self:start}
}
.card{display:flex;flex-direction:column;transition:border-color .15s}
.card:hover{border-color:var(--line-2)}
/* Stills are 16:9 with the RENDERING stamp bottom left: crop only from the top (checked by checks/site_check.mjs). */
.card img{aspect-ratio:16/9;object-fit:cover}
.card h3{margin-top:10px;font-size:clamp(20px,2.6vw,34px);letter-spacing:-.04em;line-height:1.1}
/* What I run: sample screens shown whole (3:2), title and one line under each */
.run{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.run h3{margin-top:20px}
.run p{margin-top:6px;max-width:48ch}
.how ol.four{grid-template-columns:repeat(2,minmax(0,1fr));gap:48px 40px}
/* Questions */
@media (min-width:900px){.qa .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:48px;align-items:start}}
.faq{border-top:1px solid var(--ink)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{display:flex;justify-content:space-between;align-items:baseline;gap:24px;padding:22px 0;cursor:pointer;list-style:none;font-size:clamp(18px,1.8vw,22px);font-weight:600;letter-spacing:-.02em;line-height:1.3}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";content:"+"/"";flex:none;font:400 24px/1 var(--mono);color:var(--quiet);transition:transform .15s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding-bottom:24px;max-width:62ch}
.card .btn{margin-top:24px;align-self:flex-start}
.founder{border-top:1px solid var(--line);padding:clamp(56px,8vw,112px) 0}
.founder p.say{font-size:clamp(28px,4.6vw,60px);font-weight:600;letter-spacing:-.045em;line-height:1.05;color:var(--ink);max-width:16ch}
.founder .cap{margin-top:24px}

/* renders */
.page-hero{padding:clamp(20px,3vw,40px) 0 clamp(56px,8vw,104px)}
.page-hero .fig img{aspect-ratio:16/9;object-fit:cover;object-position:50% 100%}
.page-hero h1{margin-top:clamp(36px,4vw,48px);font-size:clamp(28px,8.6vw,88px)}
.page-hero .sub{margin-top:24px}
.page-hero .acts{margin-top:32px}
@media (min-width:900px){
  .page-hero .fig img{aspect-ratio:12/5}
  .page-hero .row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:48px;align-items:end;margin-top:32px}
  .page-hero .row .sub{margin:0}
  .page-hero .row .acts{margin:0}
}
.sec{border-top:1px solid var(--line);padding:clamp(56px,8vw,112px) 0}
.sec>.wrap>h2{margin-bottom:clamp(28px,4vw,48px)}
.rooms{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.rooms .fig{padding:12px}
.rooms .fig::before{inset:4px}
.rooms img{aspect-ratio:16/9;object-fit:cover}
.rooms figcaption{margin-top:10px}
.get{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,320px);gap:clamp(40px,7vw,96px);align-items:start}
.list{border-top:1px solid var(--ink)}
.list li{display:grid;gap:6px 32px;padding:20px 0;border-bottom:1px solid var(--line)}
@media (min-width:1200px){.list li{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}}
.list p{max-width:46ch}
.clip{position:sticky;top:calc(var(--head) + 24px)}
.clip video{aspect-ratio:9/16;object-fit:cover}
.dark{background:var(--ink);color:#fff;border-top:0}
.dark h2{color:#fff}
.dark p.say{margin-top:clamp(20px,3vw,32px);font-size:clamp(22px,3vw,38px);font-weight:500;letter-spacing:-.03em;line-height:1.3;color:#c9cbcf;max-width:30ch;text-wrap:pretty}
.how ol{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 40px}
.how li{border-top:1px solid var(--ink);padding-top:18px}
.how li>span{display:block}
.how h3{margin-top:16px;font-size:clamp(22px,2.4vw,30px);letter-spacing:-.035em}
.how p{margin-top:10px;max-width:40ch;text-wrap:pretty}
.how .btn{margin-top:clamp(40px,6vw,72px)}
.items{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 40px}
.items li{border-top:1px solid var(--ink);padding-top:18px}
.items p{margin-top:10px;max-width:40ch}

/* plain pages */
.plain{padding:clamp(56px,8vw,112px) 0}
.plain h1{font-size:clamp(40px,7vw,80px);text-wrap:balance}
.plain .cap{margin-top:18px}
.plain h2{margin-top:48px;font-size:22px;letter-spacing:-.02em}
.plain p{margin-top:12px;max-width:62ch}
.plain p a{text-decoration:underline;text-underline-offset:3px}
.plain .btn{margin-top:36px}

/* footer */
.foot{background:var(--ink);color:#b3b7b0;padding:clamp(56px,8vw,96px) 0 32px}
.foot-top{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:32px}
.foot-say{font-size:clamp(22px,4.8vw,60px);font-weight:600;letter-spacing:-.045em;line-height:1.05;color:#f2f2ee}
.foot-say .q{color:#8f9398}
.foot-mark{margin-top:clamp(56px,8vw,96px);color:#f2f2ee}
.foot-mark svg{display:block;width:100%;height:auto}
.foot-row{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:12px 32px;margin-top:clamp(32px,4vw,48px);padding-top:20px;border-top:1px solid #2a2c2f}
.foot-row .cap{color:#9a9ea3;margin:0}
.foot-row nav{display:flex;flex-wrap:wrap;gap:8px 28px}
.foot-row a{color:#c9cbcf}
.foot-row a:hover{color:#fff}
.foot :focus-visible{outline-color:#f2f2ee}

@media (max-width:899px){
  :root{--gut:28px}
  .lines{grid-template-columns:minmax(0,1fr)}
  .rooms{grid-template-columns:repeat(2,minmax(0,1fr))}
  .get{grid-template-columns:minmax(0,1fr)}
  .clip{position:static;max-width:320px}
  .how ol,.how ol.four,.items,.run{grid-template-columns:minmax(0,1fr);gap:32px}
}
@media (max-width:639px){
  :root{--gut:16px;--head:60px}
  .nav>a:not(.btn){display:none}
  .mark svg{height:18px}
  .fig{padding:12px}
  .fig::before{inset:4px}
  .rooms{gap:10px}
  .rooms .fig{padding:8px}
  .rooms .fig::before{inset:2px;background-size:8px 1.5px,1.5px 8px,8px 1.5px,1.5px 8px,8px 1.5px,1.5px 8px,8px 1.5px,1.5px 8px}
  .rooms figcaption{margin-top:8px;font-size:11px}
  .rooms .fn{display:none}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}