@font-face { font-family:Fraunces; font-style:normal; font-weight:300 700; font-display:swap; src:url('../assets/fonts/fraunces-latin.woff2') format('woff2'); }
@font-face { font-family:Fraunces; font-style:italic; font-weight:400; font-display:swap; src:url('../assets/fonts/fraunces-italic-latin.woff2') format('woff2'); }
@font-face { font-family:'Public Sans'; font-style:normal; font-weight:300 700; font-display:swap; src:url('../assets/fonts/public-sans-latin.woff2') format('woff2'); }
:root { --ink:#0d231f; --paper:#f6f0e6; --teal:#00665d; --rust:#9e4f39; --soft-rust:#d18768; --sage:#71806e; --line:#c9c4b7; --display:Fraunces,Georgia,serif; --body:'Public Sans',Arial,sans-serif; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:32px; }
body { margin:0; color:var(--ink); background:var(--paper); font:400 16px/1.65 var(--body); -webkit-font-smoothing:antialiased; }
h1,h2,h3,p { margin:0; }
h1,h2,h3 { font-family:var(--display); font-weight:400; line-height:1.02; letter-spacing:-.05em; }
a { color:inherit; text-decoration:none; }
button { font:inherit; cursor:pointer; }
img { display:block; max-width:100%; }
[hidden] { display:none!important; }
::selection { color:var(--paper); background:var(--rust); }
:focus-visible { outline:2px solid currentColor; outline-offset:5px; }
.stories-shell { width:min(100% - 112px,1376px); margin-inline:auto; }
.stories-kicker { display:block; font-size:10px; font-weight:500; letter-spacing:.15em; text-transform:uppercase; }
.stories-skip { position:fixed; top:10px; left:15px; z-index:100; padding:12px 20px; color:var(--paper); background:var(--rust); transform:translateY(-150%); }
.stories-skip:focus { transform:none; }

.stories-nav { position:relative; z-index:20; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; min-height:81px; padding:10px 56px; color:var(--paper); background:var(--ink); border-bottom:1px solid #ffffff20; }
.stories-brand { display:flex; align-items:center; justify-content:center; width:112px; height:61px; }
.stories-brand img { width:100%; max-height:61px; object-fit:contain; filter:brightness(0) invert(1); }
.stories-nav-group { display:flex; align-items:center; gap:35px; }
.stories-nav-left { justify-self:start; }
.stories-nav-right { justify-self:end; }
.stories-nav a { position:relative; padding:10px 0; font-size:12px; }
.stories-nav-group a::after { position:absolute; right:100%; bottom:3px; left:0; height:1px; content:''; background:var(--soft-rust); transition:right .25s; }
.stories-nav-group a:hover::after,.stories-nav-group a.is-current::after,.stories-contact::after { right:0; }
.stories-contact:hover { color:var(--soft-rust); }
.stories-menu-button,.stories-menu { display:none; }

.stories-hero { position:relative; overflow:hidden; color:var(--paper); background:var(--ink); }
.stories-hero::before { position:absolute; right:-12vw; bottom:-31vw; width:min(69vw,860px); aspect-ratio:1; content:''; border:1px solid #d187683d; border-radius:50%; box-shadow:0 0 0 76px #d1876812,0 0 0 152px #d187680b; }
.stories-hero-grid { position:relative; z-index:1; display:grid; grid-template-columns:1.35fr .65fr; gap:10%; align-items:end; padding-top:103px; padding-bottom:116px; }
.stories-hero h1 { margin-top:28px; font-size:clamp(67px,8.65vw,128px); }
.stories-hero h1 em,.work-types h2 em,.stories-cta h2 em { color:var(--soft-rust); font-style:italic; }
.stories-hero-note { padding-bottom:13px; }
.stories-hero-note p { max-width:360px; margin-bottom:26px; color:#d5ddd3; font:400 clamp(18px,1.55vw,23px)/1.4 var(--display); letter-spacing:-.02em; }
.stories-line-link { display:inline-flex; padding:10px 0; border-bottom:1px solid currentColor; font-size:15px; }
.stories-line-link:hover { color:var(--rust); }
.stories-line-link-light:hover { color:var(--soft-rust); }

.work-types { padding:108px 0 115px; overflow:hidden; }
.work-explorer { display:grid; grid-template-columns:minmax(300px,.62fr) minmax(0,1.38fr); width:100vw; margin-left:calc(50% - 50vw); border-block:1px solid var(--line); background:#eee8df; }
.work-explorer-rail { padding:clamp(31px,4vw,56px) clamp(31px,5vw,82px); border-right:1px solid var(--line); }
.work-types-heading h2 { margin-top:24px; font-size:clamp(43px,4.8vw,70px); }
.work-types-heading h2 em { color:var(--teal); }
.work-types-heading > p { max-width:290px; margin:23px 0 0; color:#536153; font-size:13px; line-height:1.5; }
.work-type-grid { display:grid; grid-template-columns:1fr; margin-top:37px; border-top:1px solid var(--line); }
.work-type { position:relative; min-height:88px; overflow:hidden; padding:17px 26px 18px 0; border:0; border-bottom:1px solid var(--line); color:var(--ink); background:transparent; text-align:left; transition:color .25s,background .25s; }
.work-type + .work-type { padding-left:0; }
.work-type::after { position:absolute; right:-26px; bottom:-42px; width:104px; height:104px; content:''; border:1px solid currentColor; border-radius:50%; opacity:.2; transition:transform .4s; }
.work-type:hover::after,.work-type.is-active::after { transform:scale(2.6); }
.work-type:hover,.work-type.is-active { color:var(--paper); background:var(--teal); }
.work-type:nth-child(2):hover,.work-type:nth-child(2).is-active { background:var(--rust); }
.work-type:nth-child(3):hover,.work-type:nth-child(3).is-active { background:#143a33; }
.work-type:nth-child(4):hover,.work-type:nth-child(4).is-active { background:var(--sage); }
.work-type > * { position:relative; z-index:1; }
.work-type > span { display:block; color:var(--rust); font-size:10px; letter-spacing:.13em; text-transform:uppercase; }
.work-type.is-active > span,.work-type:hover > span { color:#f2c2aa; }
.work-type h3 { max-width:245px; margin:12px 0 0; font-size:20px; line-height:1.03; }
.work-type p { display:none; }
.work-type i { position:absolute; right:17px; top:50%; font-style:normal; font-size:20px; opacity:0; transform:translate(-4px,-50%); transition:.2s; }
.work-type:hover i,.work-type.is-active i { opacity:1; transform:none; }

.project-browser { min-width:0; padding:clamp(37px,4.8vw,76px); color:var(--paper); background:#143a33; }
.project-browser-head { display:grid; grid-template-columns:1.05fr .95fr; gap:10%; align-items:end; }
.project-browser-head .stories-kicker { color:#d2c0ae; }
.project-browser-head h2 { margin-top:21px; font-size:clamp(42px,4.8vw,69px); }
.project-browser-head h2 em { color:var(--soft-rust); }
.project-browser-head > p { max-width:340px; margin-bottom:8px; color:#c6d0c2; font-size:13px; }
.project-browser-layout { display:grid; grid-template-columns:minmax(175px,.38fr) minmax(0,1.62fr); margin-top:40px; border:1px solid #ffffff25; }
.project-list { display:grid; align-content:start; border-right:1px solid #ffffff25; }
.project-list button { display:grid; grid-template-columns:30px 1fr; gap:7px; padding:18px 19px; border:0; border-bottom:1px solid #ffffff17; color:#c6d0c2; background:transparent; text-align:left; font-size:13px; transition:color .2s,background .2s; }
.project-list button:last-child { border-bottom:0; }
.project-list button span { color:#d2c0ae; font-size:10px; }
.project-list button small { grid-column:2; color:inherit; font-size:10px; opacity:.68; }
.project-list button:hover,.project-list button.is-active { color:var(--paper); background:#ffffff12; }
.project-list button.is-active { box-shadow:inset 3px 0 var(--soft-rust); }
.project-preview { display:grid; grid-template-columns:minmax(0,1.12fr) minmax(270px,.88fr); min-height:500px; }
.project-preview-art { display:flex; align-items:center; justify-content:center; min-height:100%; padding:clamp(40px,5vw,82px); background:#0d2a25; }
.project-preview-art > span { max-width:240px; color:#d2c0ae; font:italic 34px/1.1 var(--display); letter-spacing:-.03em; text-align:center; }
.project-preview-art img { width:100%; max-height:390px; object-fit:contain; }
.project-preview-art.has-gallery { display:grid; grid-template-rows:1fr 1fr; gap:16px; }
.project-preview-art.has-gallery img { width:100%; height:100%; min-height:0; max-height:none; object-fit:contain; }
.project-preview-art.is-wordmark { color:#f6f0e6; font:italic clamp(37px,4.4vw,61px)/.95 var(--display); letter-spacing:-.06em; text-align:center; }
.project-preview-copy { padding:clamp(29px,3.8vw,48px) clamp(25px,3.7vw,46px); background:#0c2823; }
.project-preview-copy .stories-kicker { color:#d2c0ae; }
.project-preview-copy h3 { margin:19px 0 21px; font-size:clamp(38px,4.2vw,62px); }
.project-preview-copy > p { max-width:510px; color:#d5ddd3; font-size:14px; line-height:1.65; }
.project-preview-copy ul { display:flex; flex-wrap:wrap; gap:8px 17px; margin:26px 0 0; padding:17px 0 0; border-top:1px solid #ffffff22; color:#d2c0ae; list-style:none; font-size:10px; letter-spacing:.05em; text-transform:uppercase; }
.project-preview-copy li::before { color:var(--soft-rust); content:'• '; }
.project-links { display:flex; flex-wrap:wrap; gap:10px 16px; margin-top:20px; }
.project-links a { padding-bottom:4px; border-bottom:1px solid #d2c0ae; color:var(--paper); font-size:11px; }
.project-links a:hover { color:var(--soft-rust); }

.stories-cta { padding:82px 0; color:var(--paper); background:var(--ink); }
.stories-cta-grid { display:grid; grid-template-columns:1.25fr .75fr; gap:10%; align-items:end; }
.stories-cta h2 { font-size:clamp(46px,6.1vw,90px); }
.stories-cta-grid > div > p { max-width:330px; margin-bottom:22px; color:#c6d0c2; font-size:14px; }
.stories-footer { display:grid; grid-template-columns:1.15fr 1fr 1fr; gap:20px; padding-block:38px 20px; }
.stories-footer-brand { display:flex; align-items:center; width:140px; height:76px; }
.stories-footer-brand img { width:100%; max-height:76px; object-fit:contain; }
.stories-footer > div:first-child > p { margin-top:14px; font:17px/1.25 var(--display); }
.stories-footer nav { display:flex; flex-wrap:wrap; align-content:start; gap:10px 25px; font-size:10px; }
.stories-footer nav a:hover { text-decoration:underline; text-underline-offset:5px; }
.stories-footer-fine { display:flex; align-content:start; justify-content:flex-end; flex-wrap:wrap; gap:12px 20px; color:#536153; font-size:9px; }
.stories-footer-fine span { flex-basis:100%; text-align:right; }

@media (max-width:900px) { .stories-shell { width:calc(100% - 64px); }.stories-nav { padding-inline:36px; }.stories-nav-group { gap:21px; }.stories-hero-grid,.project-browser-head,.stories-cta-grid { gap:6%; }.work-explorer { grid-template-columns:minmax(245px,.65fr) minmax(0,1.35fr); }.work-explorer-rail { padding:33px 28px; }.project-browser-layout { grid-template-columns:minmax(155px,.5fr) minmax(0,1.5fr); }.project-preview { grid-template-columns:1fr; }.project-preview-art { min-height:250px; }.stories-footer { grid-template-columns:1fr 1fr; }.stories-footer-fine { justify-content:start; }.stories-footer-fine span { text-align:left; } }
@media (max-width:700px) { .stories-shell { width:calc(100% - 40px); }.stories-nav { display:flex; min-height:68px; padding:8px 20px; }.stories-brand { width:95px; height:52px; margin:auto; }.stories-brand img { max-height:52px; }.stories-nav-group { display:none; }.stories-menu-button { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; width:40px; height:40px; margin-left:auto; border:0; color:var(--paper); background:transparent; }.stories-menu-button span { width:22px; height:1px; background:currentColor; transition:transform .2s; }.stories-menu-button[aria-expanded='true'] span:first-child { transform:translateY(3.5px) rotate(45deg); }.stories-menu-button[aria-expanded='true'] span:last-child { transform:translateY(-3.5px) rotate(-45deg); }.stories-menu { position:absolute; top:100%; right:0; left:0; display:block; padding:15px 20px 22px; background:var(--ink); border-bottom:1px solid #ffffff2c; }.stories-menu a { display:block; padding:10px 0; font-size:14px; }.stories-hero-grid,.project-browser-head,.stories-cta-grid { grid-template-columns:1fr; gap:42px; }.stories-hero-grid { padding-top:67px; padding-bottom:87px; }.stories-hero h1 { font-size:clamp(60px,16vw,100px); }.stories-hero-note { padding:0; }.work-types { padding-block:71px; }.work-explorer { grid-template-columns:1fr; }.work-explorer-rail { padding:36px 25px 0; border-right:0; border-bottom:1px solid var(--line); }.work-types-heading > p,.project-browser-head > p { padding:0; margin:0; }.work-type-grid { grid-template-columns:1fr; margin-top:34px; }.work-type,.work-type + .work-type { display:grid; grid-template-columns:37px 1fr; gap:15px; min-height:0; padding:22px 0; border-right:0; border-bottom:1px solid var(--line); color:var(--ink); background:transparent; }.work-type::after { display:none; }.work-type.is-active,.work-type:hover { color:var(--ink); background:transparent; }.work-type > span,.work-type.is-active > span,.work-type:hover > span { color:var(--rust); }.work-type h3 { margin:0; font-size:25px; }.work-type i { right:0; bottom:auto; top:26px; color:var(--rust); opacity:1; transform:none; }.project-browser { padding:36px 25px; }.project-browser-layout { grid-template-columns:1fr; margin-top:42px; }.project-list { display:flex; overflow-x:auto; border-right:0; border-bottom:1px solid #ffffff25; }.project-list button { flex:0 0 162px; grid-template-columns:1fr; min-height:83px; border-bottom:0; border-right:1px solid #ffffff17; }.project-list button small { grid-column:1; }.project-preview { min-height:0; }.project-preview-art { min-height:270px; }.project-preview-copy { padding:38px 25px; }.stories-cta { padding-block:65px; }.stories-footer { grid-template-columns:1fr; gap:25px; padding-block:34px 18px; }.stories-footer-brand { width:120px; height:65px; }.stories-footer-brand img { max-height:65px; }.stories-footer nav { max-width:290px; }.stories-footer-fine { justify-content:start; }.stories-footer-fine span { text-align:left; } }
@media (prefers-reduced-motion:reduce) { * { scroll-behavior:auto!important; animation-duration:.01ms!important; transition-duration:.01ms!important; } }
