@font-face { font-family: Anton; src: url("assets/fonts/Anton-Regular.ttf") format("truetype"); font-display: swap; }
    @font-face { font-family: Oswald; src: url("assets/fonts/Oswald-VariableFont_wght.ttf") format("truetype"); font-weight: 200 700; font-display: swap; }
    @font-face { font-family: Barlow; src: url("assets/fonts/Barlow-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
    @font-face { font-family: Barlow; src: url("assets/fonts/Barlow-SemiBold.ttf") format("truetype"); font-weight: 600; font-display: swap; }
    :root { color-scheme: dark; --ink:#171714; --paper:#f4eee5; --muted:#c9c0b5; --red:#da4934; --gold:#e2af64; --line:rgba(244,238,229,.27); --ease:cubic-bezier(.22,1,.36,1); }
    *,*::before,*::after { box-sizing:border-box; }
    html { scroll-behavior:smooth; }
    body { margin:0; background:var(--ink); color:var(--paper); font-family:Barlow,Arial,sans-serif; }
    a { color:inherit; }
    a:focus-visible { outline:3px solid var(--gold); outline-offset:5px; }
    .skip { position:absolute; z-index:20; left:1rem; top:-5rem; background:var(--paper); color:var(--ink); padding:.8rem 1rem; }
    .skip:focus { top:1rem; }
    .hero { position:relative; isolation:isolate; min-height:100dvh; overflow:hidden; background:#302923; }
    .photo,.shade { position:absolute; inset:0; z-index:-1; }
    .photo { width:100%; height:100%; object-fit:cover; object-position:50% 43%; }
    .shade { background:linear-gradient(90deg,rgba(16,16,15,.48),transparent 48%),linear-gradient(180deg,rgba(14,15,15,.48),transparent 29%,rgba(18,18,16,.08) 45%,rgba(17,17,16,.78) 73%,#171714 100%); }
    .wrap { width:min(93%,1500px); margin:auto; }
    .hero .wrap { min-height:100dvh; display:flex; flex-direction:column; }
    .masthead { display:flex; justify-content:space-between; align-items:flex-start; gap:2rem; padding-top:clamp(1.2rem,3vw,2.6rem); }
    .brand { display:inline-flex; align-items:center; gap:clamp(.7rem,1.3vw,1.25rem); text-decoration:none; }
    .brand img { width:clamp(90px,11vw,160px); height:auto; filter:drop-shadow(0 10px 25px rgba(0,0,0,.4)); }
    .brand-name { font-family:Oswald,Impact,sans-serif; font-size:clamp(.85rem,1.3vw,1.05rem); font-weight:600; line-height:1.25; letter-spacing:.18em; text-transform:uppercase; text-shadow:0 1px 7px #181715; }
    .brand-name span,.motto span { display:block; }
    .motto { display:flex; gap:1rem; margin:.5rem 0 0; padding-left:1rem; border-left:2px solid var(--gold); font-family:Oswald,Impact,sans-serif; font-weight:500; font-size:clamp(.85rem,1.35vw,1.2rem); letter-spacing:.25em; line-height:1.6; text-transform:uppercase; text-shadow:0 2px 10px #181715; }
    .hero-content { margin-top:auto; padding:clamp(7rem,23vh,15rem) 0 clamp(2.4rem,5vw,5rem); }
    .eyebrow { display:inline-flex; align-items:center; gap:.7rem; margin:0 0 1rem; color:var(--gold); font-family:Oswald,Impact,sans-serif; font-size:clamp(.84rem,1.1vw,1rem); font-weight:500; letter-spacing:.28em; text-transform:uppercase; }
    .eyebrow::before { content:""; width:2.2rem; height:1px; background:currentColor; }
    h1 { margin:0; font-family:Anton,Impact,sans-serif; font-weight:400; text-transform:uppercase; letter-spacing:.012em; line-height:.94; text-shadow:0 4px 30px rgba(0,0,0,.22); }
    h1 span { display:block; }
    .head-first { font-size:clamp(3.8rem,8.2vw,9.5rem); }
    .head-second { color:var(--red); font-size:clamp(5.8rem,14.2vw,16.5rem); }
    .hero-bottom { display:flex; justify-content:space-between; align-items:end; gap:2rem; margin-top:clamp(1.1rem,2vw,2.2rem); }
    .intro { max-width:38rem; margin:0; font-size:clamp(1.1rem,1.5vw,1.4rem); line-height:1.5; text-wrap:balance; text-shadow:0 2px 10px #171714; }
    .actions { display:flex; flex-wrap:wrap; gap:.75rem; flex-shrink:0; }
    .action { display:inline-flex; align-items:center; justify-content:space-between; gap:1.5rem; min-height:3.5rem; padding:.8rem 1rem .8rem 1.2rem; border:1px solid var(--gold); font-family:Oswald,Impact,sans-serif; font-size:1rem; font-weight:500; line-height:1.1; letter-spacing:.12em; text-decoration:none; text-transform:uppercase; transition:transform .24s var(--ease),background-color .24s var(--ease),border-color .24s var(--ease); }
    .action:hover { transform:translateY(-3px); }
    .action:active { transform:translateY(0); }
    .primary { min-width:13rem; background:var(--gold); color:var(--ink); }
    .primary:hover { background:#f3c27c; border-color:#f3c27c; }
    .secondary { min-width:11.2rem; background:rgba(22,22,20,.48); color:var(--paper); backdrop-filter:blur(8px); }
    .secondary:hover { background:rgba(226,175,100,.16); }
    .material-symbols-outlined { font-size:1.35rem; font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 24; line-height:1; }
    .mission { border-top:1px solid var(--line); }
    .mission .wrap { display:grid; grid-template-columns:1fr 2fr; gap:clamp(2rem,7vw,8rem); padding:clamp(3rem,6vw,6rem) 0; }
    .mission h2 { margin:0; color:var(--gold); font-family:Oswald,Impact,sans-serif; font-size:.9rem; font-weight:500; letter-spacing:.25em; text-transform:uppercase; }
    .mission-lead { margin:.9rem 0 0; max-width:17ch; font-family:Anton,Impact,sans-serif; font-size:clamp(2rem,3vw,3.6rem); line-height:1.08; text-transform:uppercase; }
    .principles { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); }
    .principle { display:flex; flex-direction:column; gap:1.5rem; min-height:8rem; padding:.2rem 1.3rem; border-left:1px solid var(--line); }
    .principle .material-symbols-outlined { color:var(--gold); font-size:2rem; }
    .principle span:last-child { font-family:Oswald,Impact,sans-serif; font-size:1.2rem; letter-spacing:.12em; line-height:1.2; text-transform:uppercase; }
    .footer { border-top:1px solid var(--line); }
    .footer .wrap { min-height:6rem; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:1rem 2rem; padding:1.5rem 0; }
    .footer-brand { margin:0; font-family:Oswald,Impact,sans-serif; font-size:.9rem; letter-spacing:.22em; text-transform:uppercase; }
    .contact { display:inline-flex; align-items:center; gap:.55rem; color:var(--muted); font-size:.98rem; text-decoration-color:var(--gold); text-underline-offset:.3em; overflow-wrap:anywhere; }
    .contact:hover { color:var(--paper); }
    @media (min-width:801px) {
      .brand,.motto,.eyebrow,.hero-bottom { animation:arrive .75s var(--ease) both; }
      .brand { animation-delay:.06s; } .motto { animation-delay:.18s; } .eyebrow { animation-delay:.23s; } .hero-bottom { animation-delay:.54s; }
      .head-first,.head-second { animation:arrive .85s var(--ease) both; }
      .head-first { animation-delay:.3s; } .head-second { animation-delay:.42s; }
    }
    @keyframes arrive { from { opacity:0; transform:translateY(14px); filter:blur(4px); } to { opacity:1; transform:translateY(0); filter:blur(0); } }
    @media (max-width:1050px) {
      .hero-bottom { align-items:flex-start; flex-direction:column; }
      .mission .wrap { grid-template-columns:1fr; gap:2.5rem; }
      .mission-lead { max-width:none; }
    }
    @media (max-width:800px) {
      .hero,.hero .wrap { min-height:820px; }
      .hero .wrap { width:min(100% - 2.5rem,40rem); }
      .photo { object-position:53% center; }
      .shade { background:linear-gradient(180deg,rgba(17,17,16,.5),rgba(17,17,16,.08) 26%,rgba(17,17,16,.05) 40%,rgba(17,17,16,.8) 64%,#171714 100%); }
      .brand img { width:100px; } .brand-name { display:none; }
      .motto { font-size:.8rem; letter-spacing:.16em; }
      .hero-content { padding-top:18rem; padding-bottom:2.2rem; }
      .head-first { font-size:clamp(3.25rem,11vw,5.6rem); }
      .head-second { font-size:clamp(4.3rem,14vw,8rem); }
      .actions { width:100%; } .action { flex:1 1 12rem; }
      .principles { grid-template-columns:repeat(2,1fr); row-gap:2rem; }
    }
    @media (max-width:480px) {
      .hero,.hero .wrap { min-height:800px; }
      .brand img { width:86px; }
      .motto { margin-top:0; padding-left:.7rem; font-size:.71rem; gap:.45rem; }
      .eyebrow { font-size:.72rem; }
      .head-first { font-size:clamp(2.7rem,11.5vw,4rem); }
      .head-second { font-size:clamp(3.6rem,16vw,5.4rem); }
      .intro { font-size:1.04rem; }
      .actions { flex-direction:column; } .action { flex-basis:auto; width:100%; }
      .principle { padding-left:1rem; }
      .footer .wrap { align-items:flex-start; flex-direction:column; }
    }
    @media (prefers-reduced-motion:reduce) {
      html { scroll-behavior:auto; }
      *,*::before,*::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
    }

/* Shared navigation and interior pages */
.masthead { position:relative; z-index:5; }
.site-nav { align-self:flex-start; margin:1rem 0 0 auto; font-family:Oswald,Impact,sans-serif; font-size:.94rem; font-weight:500; letter-spacing:.12em; text-transform:uppercase; }
.desktop-links { display:flex; align-items:center; gap:clamp(1rem,2.3vw,2.5rem); white-space:nowrap; }
.desktop-links a { padding:.4rem 0; text-decoration:none; border-bottom:2px solid transparent; transition:border-color .2s var(--ease),color .2s var(--ease); }
.desktop-links a:hover,.desktop-links a[aria-current="page"] { border-color:var(--gold); }
.desktop-links a[aria-current="page"] { color:var(--gold); }
.mobile-nav { display:none; }
.interior-header { background:var(--ink); border-bottom:1px solid var(--line); }
.interior-header .masthead { align-items:center; padding-bottom:clamp(1.2rem,3vw,2.6rem); }
.interior-header .site-nav { align-self:center; margin-top:0; }
.interior-header .brand img { width:clamp(70px,8vw,100px); }
.interior-header .motto { margin:0; }

.story-hero { position:relative; isolation:isolate; min-height:clamp(470px,68svh,780px); display:flex; align-items:end; overflow:hidden; background:#62584e; }
.story-hero picture,.story-hero picture img,.story-hero::after { position:absolute; inset:0; width:100%; height:100%; }
.story-hero picture { z-index:-2; }
.story-hero picture img { object-fit:cover; object-position:50% 48%; }
.story-hero::after { content:""; z-index:-1; background:linear-gradient(90deg,rgba(17,17,16,.56),transparent 58%),linear-gradient(180deg,transparent 40%,rgba(17,17,16,.68)); }
.story-hero .wrap { padding-bottom:clamp(3rem,6vw,6.5rem); }
.page-heading { animation:page-arrive .7s var(--ease) both; }
.page-heading h1,.work-intro h1 { margin:0; font-family:Anton,Impact,sans-serif; font-size:clamp(4.4rem,10vw,10.5rem); font-weight:400; letter-spacing:.01em; line-height:.95; text-transform:uppercase; }
.page-heading p { max-width:45ch; margin:1.25rem 0 0; font-size:clamp(1.1rem,1.5vw,1.4rem); line-height:1.5; text-shadow:0 2px 14px #171714; }
@keyframes page-arrive { from { opacity:0; transform:translateY(14px); filter:blur(4px); } to { opacity:1; transform:translateY(0); filter:blur(0); } }

.story-body { padding:clamp(4rem,8vw,8rem) 0; }
.reading { width:min(100% - 2.5rem,760px); margin-inline:auto; }
.reading h2 { margin:0 0 2rem; font-family:Anton,Impact,sans-serif; font-size:clamp(2.4rem,4vw,4.2rem); font-weight:400; line-height:1.04; text-transform:uppercase; }
.reading p,.work-copy p,.work-intro p { margin:0 0 1.5rem; color:var(--paper); font-size:clamp(1.08rem,1.3vw,1.25rem); line-height:1.68; text-wrap:pretty; }
.reading p:last-child,.work-copy p:last-child { margin-bottom:0; }
.story-photo { width:min(100% - 2.5rem,1120px); margin:clamp(3.5rem,7vw,7rem) auto; }
.story-photo picture,.work-photo picture { display:block; overflow:hidden; background:#373a31; }
.story-photo img,.work-photo img { display:block; width:100%; height:100%; object-fit:cover; }
.story-photo picture { aspect-ratio:3/2; }
.story-photo figcaption { margin-top:.8rem; color:var(--muted); font-family:Oswald,Impact,sans-serif; font-size:.82rem; letter-spacing:.12em; text-transform:uppercase; }
.story-quote { width:min(100% - 2.5rem,950px); margin:clamp(4rem,8vw,8rem) auto; padding:0 0 0 clamp(1.3rem,3vw,3rem); border-left:3px solid var(--gold); }
.story-quote p { margin:0; font-family:Anton,Impact,sans-serif; font-size:clamp(2rem,4.2vw,4.6rem); font-weight:400; line-height:1.15; text-transform:uppercase; text-wrap:balance; }
.story-quote strong { color:var(--gold); font-weight:400; }

.work-intro { padding:clamp(4rem,8vw,8rem) 0 clamp(4rem,7vw,7rem); border-bottom:1px solid var(--line); }
.work-intro .wrap { display:block; }
.work-intro h1 { font-size:clamp(4.2rem,8.3vw,9rem); }
.work-intro h1 { margin-bottom:clamp(1.8rem,4vw,3rem); }
.work-intro .wrap > div { max-width:820px; }
.work-intro p:first-child { font-size:clamp(1.3rem,1.8vw,1.65rem); line-height:1.5; }
.work-intro p:last-child { margin-bottom:0; color:var(--muted); }
.work-section { border-bottom:1px solid var(--line); }
.work-section .wrap { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(2rem,6vw,7rem); align-items:center; padding:clamp(4rem,7vw,7rem) 0; }
.work-section--copy-first .work-copy { grid-column:1; grid-row:1; }
.work-section--copy-first .work-photo { grid-column:2; grid-row:1; }
.work-section--image-first .work-copy { grid-column:2; grid-row:1; }
.work-section--image-first .work-photo { grid-column:1; grid-row:1; }
.work-photo { margin:0; }
.work-photo picture { aspect-ratio:3/2; }
.work-photo img { object-position:center; }
.work-copy h2 { max-width:17ch; margin:0 0 1.5rem; font-family:Anton,Impact,sans-serif; font-size:clamp(2.35rem,3.5vw,4.4rem); font-weight:400; line-height:1.07; text-transform:uppercase; text-wrap:balance; }
.work-copy p { max-width:62ch; }
.closing { padding:clamp(4rem,7vw,7rem) 0; border-top:1px solid var(--line); }
.closing .wrap { display:flex; align-items:end; justify-content:space-between; gap:2rem; }
.closing h2 { max-width:16ch; margin:0; font-family:Anton,Impact,sans-serif; font-size:clamp(2.7rem,5vw,5.5rem); font-weight:400; line-height:1.05; text-transform:uppercase; }
.closing p { max-width:42ch; margin:1rem 0 0; color:var(--muted); font-size:1.08rem; line-height:1.55; }
.closing .action { flex-shrink:0; }

@media (max-width:1150px) {
  .masthead .motto { display:none; }
  .site-nav { margin-left:auto; }
}
@media (max-width:800px) {
  .site-nav { align-self:flex-start; margin:.45rem 0 0 auto; }
  .interior-header .site-nav { align-self:center; }
  .desktop-links { display:none; }
  .mobile-nav { display:block; position:relative; }
  .mobile-nav summary { display:flex; align-items:center; justify-content:space-between; gap:.9rem; min-width:7.5rem; min-height:2.75rem; padding:.55rem .8rem; border:1px solid var(--gold); background:rgba(23,23,20,.82); cursor:pointer; list-style:none; }
  .mobile-nav summary::-webkit-details-marker { display:none; }
  .mobile-nav summary:focus-visible { outline:3px solid var(--gold); outline-offset:4px; }
  .menu-mark { width:1rem; height:.7rem; border-top:2px solid currentColor; border-bottom:2px solid currentColor; }
  .mobile-nav[open] .menu-mark { height:1rem; border:0; position:relative; }
  .mobile-nav[open] .menu-mark::before,.mobile-nav[open] .menu-mark::after { content:""; position:absolute; top:.45rem; left:0; width:1rem; height:2px; background:currentColor; transform:rotate(45deg); }
  .mobile-nav[open] .menu-mark::after { transform:rotate(-45deg); }
  .mobile-links { position:absolute; right:0; top:calc(100% + .4rem); width:min(18rem,calc(100vw - 2.5rem)); padding:.5rem; border:1px solid var(--gold); background:var(--ink); box-shadow:0 18px 35px rgba(0,0,0,.4); }
  .mobile-links a { display:block; min-height:2.75rem; padding:.7rem .8rem; text-decoration:none; }
  .mobile-links a:hover,.mobile-links a[aria-current="page"] { color:var(--gold); background:rgba(226,175,100,.1); }
  .story-hero { min-height:540px; }
  .story-hero picture img { object-position:73% center; }
  .work-intro .wrap,.work-section .wrap { grid-template-columns:1fr; }
  .work-section .wrap { gap:2rem; }
  .work-section .work-photo,.work-section .work-copy { grid-column:1 !important; }
  .work-section .work-photo { grid-row:1 !important; }
  .work-section .work-copy { grid-row:2 !important; }
  .closing .wrap { align-items:flex-start; flex-direction:column; }
}
@media (max-width:480px) {
  .interior-header .brand img { width:72px; }
  .story-hero { min-height:520px; }
  .story-hero picture img { object-position:78% center; }
  .story-hero .wrap { padding-bottom:2.5rem; }
  .page-heading h1,.work-intro h1 { font-size:clamp(3.8rem,16vw,5.7rem); }
  .story-photo picture { aspect-ratio:4/3; }
  .work-photo picture { aspect-ratio:4/3; }
  .story-photo img,.work-photo img { object-position:center; }
  .work-copy h2 { margin-bottom:1.4rem; }
}