/* Editorial portfolio: warm paper, forest ink, generous image-led layouts. */
:root { --paper:#f8f7f2; --ink:#173a30; --muted:#596c62; --line:#dce2d8; --lime:#d5edaa; }
body { background:var(--paper); color:var(--ink); }
.wrap { max-width:1240px; width:calc(100% - 112px); }
.header { max-width:1320px; margin:16px auto 0; padding:18px 32px; border:1px solid #e2e6dd; background:#fffef9ed; border-radius:18px; }
.brand { font-size:18px; gap:12px; }.brandmark { width:43px; height:43px; border-radius:13px; background:#193d31; }.brand-sub { font-size:9px; color:#687c6d; }
.header nav { font-size:13px; gap:30px; }.nav-contact { background:#203f34; color:#fff; border-color:#203f34; padding:12px 19px; }.header nav .nav-contact:hover { color:#d5edaa; }
.hero { padding:86px 0 76px; grid-template-columns:1.08fr 1fr; gap:64px; }
.hero .eyebrow { font-size:11px; letter-spacing:1px; color:#4e6856; }.hero .eyebrow .dot { box-shadow:0 0 0 5px #e8eedc; margin-right:5px; }
h1 { font-size:clamp(42px,4.25vw,61px); letter-spacing:-2.2px; line-height:1.32; font-weight:650; margin:29px 0 27px; }
.accent-word:after { inset:62% -6px 0; background:#d2eaa6; transform:rotate(-3deg); }.lime { color:#739747; }
.hero-description { max-width:470px; font-size:15px; line-height:1.95; color:#5b6e61; }.hero-actions { margin:33px 0 25px; }.button { border-radius:11px; font-size:13px; padding:17px 23px; }.primary { background:#203f34; box-shadow:0 6px 14px #1d382315; }.primary:hover { background:#315b44; }.text-link { font-size:12px; color:#415e4c; }.hero-note { font-size:11px; color:#788675; }
.hero-showcase { position:relative; background:#e6ecde; border:1px solid #d2ddc9; padding:20px; border-radius:21px; transform:rotate(-.8deg); box-shadow:14px 20px 0 #edf0e6,0 20px 45px #2443300b; }
.showcase-top,.showcase-bottom { font-size:8px; color:#536d50; }.showcase-primary { border-radius:12px; background:#fffef9; box-shadow:0 7px 16px #2b493311; }.showcase-primary>img { height:260px; object-fit:cover; }.showcase-label { padding:15px 17px; font-size:13px; }.showcase-label small { font-size:11px; color:#6e7e67; }.showcase-secondary img { height:113px; }.showcase-secondary span { font-size:10px; padding:11px 13px; }.showcase-secondary button { background:#f8faf3; border-radius:9px; }
.facts { background:#f0f2e9; border:1px solid #dfe5d6; border-radius:16px; padding:28px 32px; grid-template-columns:1fr 1fr 1.2fr 1.1fr; }
.facts>div { padding-left:30px; border-color:#d6dfce; }.facts strong { font-size:36px; font-weight:500; color:#264c36; }.facts p { font-size:11px; color:#63775d; }.facts .fact-text strong { font-size:25px; }.facts-caption { display:block; }
.section { padding:88px 0; }.section-top { margin-bottom:32px; }.section-top h2 { font-size:36px; letter-spacing:-1px; font-weight:600; }.section-top .eyebrow { font-size:10px; color:#749363; letter-spacing:1.8px; }.section-top>p { font-size:13px; line-height:1.9; color:#627361; }
.filter-row { margin-bottom:32px; flex-wrap:wrap; gap:9px; }.filter { padding:11px 19px; font-size:12px; background:#fffdf7; border-color:#dce2d3; }.filter.active { background:#244c38; border-color:#244c38; box-shadow:0 4px 10px #25433114; }
.project-grid { gap:32px; }.project { background:#fffef9; border:1px solid #dfe4d9; border-radius:19px; box-shadow:0 4px 14px #273c2404; }.project:hover { transform:translateY(-5px); border-color:#b6c7a6; box-shadow:0 18px 35px #2441250c; }
.project-preview { background:#e9eedf; }.project:nth-child(3n+2) .project-preview { background:#e6ece9; }.project:nth-child(3n) .project-preview { background:#edece2; }
.preview-bar { background:transparent; border-bottom:0; padding:17px 21px 5px; color:#63755b; font-size:9px; }.preview-bar>span:nth-child(2) { font-family:inherit; font-size:10px; }.window-dots { letter-spacing:2px; color:#9ba98a; }
.preview-image { height:324px; padding:15px 22px; }.preview-image img { object-fit:cover; border-radius:9px; border-color:#d7dfce; box-shadow:0 8px 19px #2c462015; }
.preview-caption { color:#65775d; font-size:10px; padding:2px 22px 18px; }.preview-caption>span { font-size:10px; font-family:inherit; color:#465f3d; }
.project-body { padding:29px 30px 25px; }.project-meta { font-size:10px; gap:12px; }.project-index { color:#718169; }.status { font-size:10px; padding:6px 10px; }.project h3 { font-size:24px; letter-spacing:-.6px; margin:21px 0 10px; }.project-body>.project-date { font-size:10px; color:#86917d; margin-bottom:16px; }.project-body>p { color:#5b6c55; font-size:13px; line-height:1.9; min-height:74px; }
.tags { gap:7px; margin:22px 0; }.tags span { background:#f1f4eb; color:#607355; border:0; padding:6px 9px; font-size:10px; }.case-link { font-size:12px; color:#355a36; padding-top:18px; }.case-link span { border-radius:50%; background:#eaf1dd; width:28px; height:28px; display:inline-flex; align-items:center; justify-content:center; font-size:18px; }
.archive-note { padding-top:24px; margin-top:32px; }.archive-note p { font-size:11px; color:#6e7d65; }.archive-count { font-size:9px; color:#6a805c; }
.approach { background:#203e31; padding:76px 0; }.approach .section-top .eyebrow { color:#a6c785; }.approach .section-top h2 { color:#f1f5e9; }.approach .section-top>p { color:#b7c7ad; }.steps { gap:30px; }.steps h3 { font-size:19px; }.steps p { font-size:13px; line-height:1.95; color:#bacbb3; }.step-number { color:#c8e699; }
.experience-left h2 { font-size:38px; line-height:1.5; }.timeline h3,.toolkit>h3 { font-size:20px; }.timeline p { font-size:13px; line-height:1.9; color:#61735d; }.skill-row p { font-size:12px; line-height:1.9; }.contact { padding:53px; background:#e7eedc; border:1px solid #d9e3cc; border-radius:23px; }.contact h2 { font-size:36px; }.footer { font-size:10px; padding-top:38px; }
#case-dialog { border:1px solid #d6e0cb; background:#fbfcf6; box-shadow:0 28px 100px #0b221a40; border-radius:20px; }.dialog-top { background:#fbfcf6; padding:20px 32px; }#case-content { padding:29px 40px 38px; }#case-content h2 { font-size:32px; font-weight:600; }#case-content .lead { font-size:14px; color:#60735a; }#case-content h3 { font-size:17px; }#case-content li { font-size:13px; line-height:1.9; color:#596e51; }
.gallery-heading>span { color:#698757; font-size:10px; }.gallery-filters { gap:8px; margin:20px 0; }.gallery-filters button { padding:9px 13px; font-size:11px; }.gallery-primary { border-radius:13px; }.gallery-primary>span { font-size:12px; padding:15px 18px; color:#4d6c3f; }.gallery-note { color:#647b57!important; font-size:11px!important; line-height:1.8; }.gallery-position { color:#6c815f; font-size:11px; }.gallery-thumbs { gap:12px; }.gallery-thumbs button { padding:6px; background:#f3f6ec; border-radius:10px; }.gallery-thumbs img { height:100px; }.gallery-thumbs small { font-size:10px; color:#5e7d4e; }.gallery-thumbs span { font-size:10px; line-height:1.6; padding:7px 4px; }
.dialog-footer { background:#eef3e5; }.boundary { border-radius:0 12px 12px 0; background:#eff4e7; }
@media(min-width:1450px) { .hero { gap:75px; }.preview-image { height:340px; } }
@media(max-width:1100px) { .header { margin:12px 28px 0; padding:16px 22px; }.hero { gap:35px; }h1 { font-size:44px; }.hero-description { font-size:14px; }.showcase-primary>img { height:225px; }.showcase-secondary img { height:86px; }.preview-image { height:280px; }.project-body { padding:25px; }.project h3 { font-size:22px; }.preview-caption { font-size:9px; }.facts { padding:25px; }.facts>div { padding-left:22px; }.facts .fact-text strong { font-size:22px; } }
@media(max-width:720px) { .wrap { width:calc(100% - 36px); }.header { margin:10px 12px 0; padding:13px 14px; border-radius:14px; }.brand { font-size:15px; gap:9px; }.brandmark { width:35px; height:35px; font-size:17px; }.brand-sub { font-size:7px; letter-spacing:.6px; }.header nav { gap:14px; font-size:11px; }.header nav a[href="#approach"],.header nav a[href="#experience"] { display:none; }.nav-contact { padding:9px 12px; }.nav-contact span { margin-left:4px; }
.hero { padding:49px 0 42px; grid-template-columns:1fr; gap:38px; }.hero .eyebrow { font-size:9px; letter-spacing:.3px; }h1 { font-size:clamp(36px,9.7vw,47px); letter-spacing:-1.6px; margin:24px 0; line-height:1.35; }.hero-description { font-size:13px; line-height:1.95; }.hero-actions { gap:19px; margin:28px 0 22px; }.button { padding:15px 18px; font-size:12px; gap:20px; }.text-link { font-size:11px; }.hero-note { font-size:10px; }.hero-showcase { transform:none; padding:15px; border-radius:17px; box-shadow:6px 9px 0 #edf0e6; }.showcase-primary>img { height:auto; aspect-ratio:1.5; }.showcase-label { font-size:12px; }.showcase-secondary img { height:95px; }.showcase-top { font-size:7px; }.showcase-bottom { font-size:7px; }
.facts { padding:24px; grid-template-columns:1fr 1fr; gap:23px 15px; }.facts>div { padding:0 0 0 18px; }.facts>div:nth-child(odd) { border:0; padding-left:0; }.facts strong { font-size:32px; }.facts .fact-text strong { font-size:22px; }.facts p { font-size:10px; line-height:1.7; }.facts-caption { display:block; }
.section { padding:55px 0; }.section-top { display:block; margin-bottom:24px; }.section-top h2 { font-size:29px; }.section-top>p { margin-top:17px; font-size:12px; }.filter-row { gap:7px; margin-bottom:23px; }.filter { padding:9px 13px; font-size:11px; }.project-grid { grid-template-columns:1fr; gap:24px; }.project { border-radius:16px; }.preview-bar { padding:15px 17px 4px; }.preview-image { height:250px; padding:12px 16px; }.preview-caption { padding:1px 17px 15px; font-size:9px; gap:6px; }.preview-caption>span { font-size:9px; }.project-body { padding:23px; }.project h3 { font-size:22px; }.project-body>p { min-height:0; font-size:13px; }.project-meta { font-size:9px; }.tags span { font-size:9px; }.archive-note p { font-size:10px; }
.approach { padding:50px 0; }.steps { gap:24px; }.steps p { font-size:12px; }.experience-left h2 { font-size:31px; }.contact { padding:31px 25px; border-radius:18px; }.contact h2 { font-size:29px; }.footer { font-size:9px; }
#case-dialog { width:calc(100% - 20px); border-radius:15px; }.dialog-top { padding:17px 20px; }#case-content { padding:22px; }#case-content h2 { font-size:25px; }#case-content .lead { font-size:13px; }#case-content li { font-size:12px; }.gallery-heading>span { font-size:8px; }.gallery-filters { gap:6px; }.gallery-filters button { padding:8px 10px; font-size:10px; }.gallery-primary>span { font-size:10px; padding:12px; }.gallery-note { font-size:10px!important; }.gallery-position { font-size:9px; }.gallery-thumbs { gap:9px; }.gallery-thumbs img { height:79px; }.gallery-thumbs small,.gallery-thumbs span { font-size:9px; }.dialog-footer { padding:20px 22px; }
}
@media print { .header { border:0; }.hero-showcase,.facts-caption { display:none; }.facts { background:white; }.project { box-shadow:none; border-radius:0; }.section { padding:22px 0; } }

/* Read each project introduction before its screenshots. */
.project,.project:last-child { display:flex; flex-direction:column; }
.project-body { flex:1; }
.project-preview { flex:0 0 auto; border-top:1px solid var(--line); }
.project[hidden] { display:none; }
@media print { .project,.project:last-child { display:block!important; } }