/* Dreamland kit (dreamland-brand skill): canyon red, ink, panel cream, tan, green; Lato body, Yanone Kaffeesatz display.
   Fonts and photos are served from this site, never a CDN. No dark mode: the kit defines none. */
@font-face{font-family:Lato;font-weight:400;font-style:normal;font-display:swap;src:url(fonts/Lato-Regular.woff2) format("woff2")}
@font-face{font-family:Lato;font-weight:700;font-style:normal;font-display:swap;src:url(fonts/Lato-Bold.woff2) format("woff2")}
@font-face{font-family:"Yanone Kaffeesatz";font-weight:600;font-style:normal;font-display:swap;src:url(fonts/YanoneKaffeesatz-SemiBold.woff2) format("woff2")}
@font-face{font-family:"Yanone Kaffeesatz";font-weight:700;font-style:normal;font-display:swap;src:url(fonts/YanoneKaffeesatz-Bold.woff2) format("woff2")}

:root{--red:#971A20;--red-dark:#7a1319;--ink:#1F1F1F;--grey:#6B6B6B;--line:#d9d4c7;--panel:#FAF6E8;--tan:#C6B38E;--green:#63813E;--dark:#2a2220;--display:"Yanone Kaffeesatz",Impact,"Arial Narrow",sans-serif}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:#fff;color:var(--ink);font:17px/1.6 Lato,Helvetica,Arial,sans-serif}
img{max-width:100%;display:block}
a{color:var(--red)}
:focus-visible{outline:3px solid var(--red);outline-offset:2px}
h1,h2,h3,h4{margin:0}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* masthead */
.top{max-width:1100px;margin:0 auto;padding:16px 20px 14px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{display:flex;align-items:center;gap:16px;text-decoration:none;color:var(--ink)}
.brand img{width:76px;height:76px}
.wm{font:700 2.05rem/1 var(--display);letter-spacing:.07em}
.wm small{display:block;font:400 .95rem Lato,sans-serif;letter-spacing:.04em;color:var(--grey);margin-top:6px}
.back{font:700 .85rem Lato,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--ink);text-decoration:none;border-bottom:2px solid var(--tan);padding-bottom:2px;white-space:nowrap}
.back:hover{border-color:var(--red)}
.rule{height:4px;background:var(--red)}
@media(max-width:620px){.brand img{width:56px;height:56px}.wm{font-size:1.45rem}.wm small{font-size:.85rem}.back{display:none}}

/* hero: text left, team photo right */
.hero{background:var(--panel);border-bottom:1px solid var(--line)}
.hero-grid{max-width:1100px;margin:0 auto;padding:0 20px;display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:center}
.hero-text{padding:46px 0}
.hero h1{font:700 clamp(2.5rem,4.8vw,3.9rem)/1 var(--display);text-transform:uppercase;letter-spacing:.02em;max-width:17ch}
.hero h1::after{content:"";display:block;width:64px;height:5px;background:var(--red);margin-top:18px}
.hero p{font-size:1.15rem;max-width:34ch;margin:18px 0 0}
.hero-photo{margin:28px 0;min-height:360px;border-radius:10px;background:#3a2c26 url(img/team.jpg) 40% 28%/cover no-repeat;box-shadow:0 10px 30px rgba(30,18,12,.22)}
@media(max-width:760px){
  .hero-grid{grid-template-columns:1fr;gap:0;padding:0}
  .hero-photo{order:-1;margin:0;min-height:0;aspect-ratio:3/2;border-radius:0;box-shadow:none;background-position:40% 30%}
  .hero-text{padding:26px 20px 30px}
}

/* positions */
.wrap{max-width:860px;margin:0 auto;padding:36px 20px 56px}
.job{background:var(--panel);border:2px solid var(--tan);border-radius:10px;margin:0 0 18px;overflow:hidden}
.job[open]{background:#fff;border-color:var(--red)}
.job summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:14px;padding:20px 22px}
.job summary::-webkit-details-marker{display:none}
.job summary:hover .name{color:var(--red)}
.jt{flex:1;min-width:0}
.name{display:block;font:700 2.1rem/1.05 var(--display);text-transform:uppercase;letter-spacing:.03em}
.meta{display:block;color:var(--grey);font-size:.95rem;margin-top:4px}
.pill{flex:none;font:700 .8rem Lato,sans-serif;letter-spacing:.07em;text-transform:uppercase;padding:7px 13px 7px 11px;border-radius:999px;display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.pill::before{content:"";width:10px;height:10px;border-radius:50%;flex:none}
.pill.hiring{background:var(--green);color:#fff}
.pill.hiring::before{background:#fff}
.pill.soon{background:#fff;color:var(--ink);border:2px solid var(--tan)}
.pill.soon::before{background:transparent;border:2px solid var(--ink)}
.pill.closed{background:#ece8dc;color:var(--grey)}
.pill.closed::before{background:var(--grey);clip-path:polygon(0 40%,100% 40%,100% 60%,0 60%)}
.chev{flex:none;width:12px;height:12px;border-right:3px solid var(--red);border-bottom:3px solid var(--red);transform:rotate(45deg);margin:0 6px 4px 4px;transition:transform .15s}
.job[open] .chev{transform:rotate(-135deg);margin-bottom:-4px}
@media(max-width:620px){
  .job summary{flex-wrap:wrap;padding:18px 16px;gap:10px 12px}
  .jt{flex:1 1 70%}
  .pill{order:3}
  .name{font-size:1.8rem}
}

.body{padding:2px 22px 26px;border-top:1px solid var(--line)}
.body h3{font:700 1.7rem/1 var(--display);text-transform:uppercase;letter-spacing:.04em;color:var(--red);margin:30px 0 10px}
.body h4{font:700 1.15rem/1.2 Lato,sans-serif;margin:18px 0 6px}
.body ul{margin:0;padding-left:1.2em}
.body li{margin:0 0 7px}
.body li::marker{color:var(--red)}
.lede{font-size:1.08rem;margin:20px 0 0}
.note{margin:22px 0 0;color:var(--grey)}
.glance{margin:22px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.glance div{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:12px 14px}
.glance dt{font:700 .78rem Lato,sans-serif;letter-spacing:.09em;text-transform:uppercase;color:var(--grey)}
.glance dd{margin:3px 0 0}
@media(max-width:620px){.glance{grid-template-columns:1fr}.body{padding:2px 16px 22px}}

.apply{margin-top:30px;padding:20px 22px;background:var(--panel);border:1px solid var(--line);border-left:6px solid var(--red);border-radius:8px}
.apply p{margin:0 0 12px;font-weight:700}
.cta{display:inline-block;background:var(--red);color:#fff;text-decoration:none;font:700 1.2rem var(--display);letter-spacing:.1em;text-transform:uppercase;padding:12px 26px;border-radius:4px;overflow-wrap:anywhere}
.cta:hover{background:var(--red-dark)}

/* footer */
.foot{background:var(--dark);color:#e9e2d4}
.foot-in{max-width:860px;margin:0 auto;padding:30px 20px 36px}
.foot p{margin:0 0 6px}
.foot a{color:#fff}
.foot .small{font-size:.9rem;opacity:.8}