/* ========================================================================== AMAZENO CRAFTSMANSHIP LTD — site.css Style base : Swiss Modernism 2.0 (strict 12-col, mathematical spacing) Editorial : Editorial Grid / Magazine (drop caps, pull quotes) Accent use : Brass held under 5%, rules + dark-section labels only ========================================================================== */ /* --- 1. Tokens ----------------------------------------------------------- */ :root{ /* Brand */ --ironstone:#1C1B19; --limewash:#F4F0E8; --iroko:#6B4A2B; --laterite:#A8553A; --brass:#B08D57; /* Semantic — light (default) */ --bg:var(--limewash); --surface:#EDE8DE; --surface-2:#E4DDD0; --ink:var(--ironstone); --ink-muted:#6B6459; /* 5.14:1 on limewash, 4.79:1 on surface */ --ink-accent:var(--iroko); /* 7.00:1 on limewash */ --rule:#D6CEC0; --rule-strong:#BDB2A0; --hairline:var(--brass); --fill:var(--laterite); /* limewash text on laterite = 4.59:1 */ --fill-ink:var(--limewash); --focus:var(--ironstone); /* Type */ --display:"Cormorant Garamond",Cormorant,Georgia,"Times New Roman",serif; --body:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; /* Modular type scale (1.25 major third, 16px base) */ --t-xs:0.75rem; /* 12 — labels only, uppercase + tracked */ --t-sm:0.875rem; /* 14 */ --t-base:1rem; /* 16 — body floor */ --t-md:1.125rem; /* 18 — lead */ --t-lg:1.375rem; --t-xl:1.75rem; --t-2xl:2.25rem; --t-3xl:3rem; --t-4xl:clamp(2.75rem,7vw,5.25rem); --t-5xl:clamp(3.25rem,10vw,8rem); /* Spacing — spacious marketing scale, 8px base */ --space-1:0.5rem; /* 8 */ --space-2:1rem; /* 16 */ --space-3:1.5rem; /* 24 */ --space-4:2rem; /* 32 */ --space-5:3rem; /* 48 */ --space-6:4rem; /* 64 */ --space-7:6rem; /* 96 */ --space-8:9rem; /* 144 */ /* Grid */ --grid-columns:12; --grid-gap:var(--space-3); --measure:68ch; --shell:80rem; --gutter:clamp(1.25rem,5vw,4.5rem); /* Motion */ --ease:cubic-bezier(.22,.61,.36,1); --dur-fast:160ms; --dur:260ms; --dur-slow:640ms; } /* Dark sections opt in via .invert — not a theme toggle, a band treatment */ .invert{ --bg:var(--ironstone); --surface:#25231F; --surface-2:#2E2B26; --ink:var(--limewash); --ink-muted:#B8B1A5; /* 8.09:1 on ironstone */ --ink-accent:var(--brass); /* 5.57:1 on ironstone */ --rule:#3A3630; --rule-strong:#4E483F; --fill:var(--limewash); --fill-ink:var(--ironstone); --focus:var(--limewash); background:var(--bg); color:var(--ink); } /* --- 2. Reset ------------------------------------------------------------ */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} body{ margin:0; background:var(--bg); color:var(--ink); font-family:var(--body); font-size:var(--t-base); font-weight:400; line-height:1.6; -webkit-font-smoothing:antialiased; } /* Horizontal containment goes on , not . On body, `overflow-x:clip` forces overflow-y to compute to `clip` too and kills vertical scrolling. */ html{overflow-x:hidden} img,svg,video{display:block;max-width:100%;height:auto} h1,h2,h3,h4,p,figure,blockquote,ul,ol,dl,dd{margin:0} ul,ol{padding:0;list-style:none} button,input,select,textarea{font:inherit;color:inherit} a{color:inherit;text-decoration:none} /* Focus — WCAG 2.2: >=2px perimeter, 3:1 state contrast */ :focus-visible{ outline:2px solid var(--focus); outline-offset:3px; border-radius:2px; } :focus:not(:focus-visible){outline:none} .skip-link{ position:absolute;left:var(--space-2);top:-4rem;z-index:200; background:var(--ironstone);color:var(--limewash); padding:.75rem 1.25rem;font-size:var(--t-sm);font-weight:500; transition:top var(--dur-fast) var(--ease); } .skip-link:focus{top:var(--space-2)} .visually-hidden{ position:absolute!important;width:1px;height:1px;padding:0;margin:-1px; overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0; } /* --- 3. Layout ----------------------------------------------------------- */ .shell{width:100%;max-width:var(--shell);margin-inline:auto;padding-inline:var(--gutter)} .shell--wide{max-width:96rem} .grid{display:grid;grid-template-columns:repeat(var(--grid-columns),1fr);gap:var(--grid-gap)} .section{padding-block:var(--space-7)} .section--tight{padding-block:var(--space-6)} .section--tall{padding-block:var(--space-8)} .stack>*+*{margin-top:var(--space-3)} .stack-sm>*+*{margin-top:var(--space-1)} .stack-lg>*+*{margin-top:var(--space-5)} .rule{height:1px;background:var(--rule);border:0;margin:0} .rule--brass{height:1px;background:var(--hairline);border:0;opacity:.85} /* --- 4. Typography ------------------------------------------------------- */ .display{ font-family:var(--display); font-weight:300; line-height:1.02; letter-spacing:-.015em; text-wrap:balance; max-inline-size:26ch; /* bound the measure; natural wrap fallback */ } .display em{font-style:italic;font-weight:400} .d-hero{font-size:var(--t-5xl)} .d-1{font-size:var(--t-4xl)} .d-2{font-size:clamp(2rem,4.5vw,3.25rem)} .d-3{font-size:clamp(1.5rem,3vw,2.25rem);line-height:1.1} .d-4{font-size:var(--t-xl);line-height:1.15} .label{ font-family:var(--body); font-size:var(--t-xs); font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-accent); display:flex;align-items:center;gap:.75rem; } .label::before{ content:"";width:2rem;height:1px;background:var(--hairline);flex:none; } .label--plain{display:block} .label--plain::before{display:none} .lead{font-size:var(--t-md);line-height:1.6;max-inline-size:60ch;color:var(--ink)} .prose{max-inline-size:var(--measure);color:var(--ink-muted)} .prose p+p{margin-top:var(--space-2)} .prose strong{color:var(--ink);font-weight:600} .muted{color:var(--ink-muted)} .mono-num{ font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1; } /* Editorial devices — Editorial Grid / Magazine */ .dropcap>p:first-of-type::first-letter{ font-family:var(--display); font-weight:400; float:left; font-size:4.6em; line-height:.78; padding:.06em .12em 0 0; color:var(--ink-accent); } .pullquote{ font-family:var(--display); font-size:clamp(1.5rem,3vw,2.375rem); line-height:1.2; font-weight:300; font-style:italic; color:var(--ink); border-left:2px solid var(--hairline); padding-left:var(--space-3); max-inline-size:34ch; } .pullquote cite{ display:block;margin-top:var(--space-2); font-family:var(--body);font-style:normal;font-size:var(--t-xs); font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-muted); } .columns-2{column-count:2;column-gap:var(--space-5)} @media (max-width:860px){.columns-2{column-count:1}} /* --- 5. Buttons & links -------------------------------------------------- */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:.625rem; min-height:48px;min-width:48px;padding:.875rem 1.75rem; font-size:var(--t-sm);font-weight:500;letter-spacing:.04em; border:1px solid transparent;border-radius:0;cursor:pointer; background:var(--ink);color:var(--bg); transition:background var(--dur) var(--ease),color var(--dur) var(--ease), border-color var(--dur) var(--ease),transform var(--dur-fast) var(--ease); text-align:center; } .btn:hover{background:var(--laterite);color:var(--limewash)} .btn:active{transform:translateY(1px)} .btn--ghost{background:transparent;color:var(--ink);border-color:var(--rule-strong)} .btn--ghost:hover{background:var(--ink);color:var(--bg);border-color:var(--ink)} .btn--block{width:100%} .btn .arw{transition:transform var(--dur) var(--ease)} .btn:hover .arw{transform:translateX(4px)} .tlink{ display:inline-flex;align-items:center;gap:.5rem; min-height:44px; font-size:var(--t-sm);font-weight:500;letter-spacing:.02em; color:var(--ink); border-bottom:1px solid var(--rule-strong); transition:border-color var(--dur) var(--ease),color var(--dur) var(--ease); } .tlink:hover{border-color:var(--laterite);color:var(--ink-accent)} .tlink .arw{transition:transform var(--dur) var(--ease)} .tlink:hover .arw{transform:translateX(4px)} /* --- 6. Material textures (hand-built, no image requests) ---------------- */ .mat{ position:relative;overflow:hidden; background:var(--surface-2); isolation:isolate; } .mat::after{ /* unifying grain wash keeps the set as one family */ content:"";position:absolute;inset:0;pointer-events:none; background: repeating-linear-gradient(115deg,rgba(28,27,25,.045) 0 1px,transparent 1px 4px); mix-blend-mode:multiply; } .mat--iroko{ background: repeating-linear-gradient(88deg, rgba(28,27,25,.16) 0 1px, rgba(107,74,43,0) 1px 7px, rgba(28,27,25,.09) 7px 8px, rgba(107,74,43,0) 8px 19px), repeating-linear-gradient(92deg, rgba(255,246,232,.10) 0 2px, transparent 2px 13px), linear-gradient(160deg,#7D5733 0%,#6B4A2B 46%,#533717 100%); } .mat--laterite{ background: radial-gradient(circle at 18% 24%,rgba(28,27,25,.22) 0 1.5px,transparent 2px), radial-gradient(circle at 63% 71%,rgba(28,27,25,.18) 0 2px,transparent 2.5px), radial-gradient(circle at 84% 33%,rgba(244,240,232,.16) 0 1.5px,transparent 2px), linear-gradient(150deg,#BC6444 0%,#A8553A 52%,#8A3F28 100%); background-size:26px 26px,38px 38px,31px 31px,100% 100%; } .mat--screed{ background: radial-gradient(circle at 30% 60%,rgba(28,27,25,.07) 0 3px,transparent 4px), radial-gradient(circle at 78% 22%,rgba(28,27,25,.05) 0 2px,transparent 3px), linear-gradient(145deg,#D9D2C4 0%,#C9C0AF 60%,#B6AC98 100%); background-size:19px 19px,27px 27px,100% 100%; } .mat--terrazzo{ background: radial-gradient(ellipse 5px 3px at 22% 28%,#6B4A2B 0 100%,transparent 0), radial-gradient(ellipse 4px 5px at 68% 18%,#A8553A 0 100%,transparent 0), radial-gradient(ellipse 6px 3px at 44% 72%,#1C1B19 0 100%,transparent 0), radial-gradient(ellipse 3px 4px at 86% 61%,#B08D57 0 100%,transparent 0), radial-gradient(ellipse 4px 3px at 12% 84%,#8A8274 0 100%,transparent 0), linear-gradient(0deg,#E8E2D6,#E8E2D6); background-size:78px 78px,96px 96px,64px 64px,110px 110px,84px 84px,100% 100%; } .mat--ironstone{ background: repeating-linear-gradient(74deg,rgba(244,240,232,.05) 0 1px,transparent 1px 9px), linear-gradient(155deg,#2B2825 0%,#1C1B19 58%,#121110 100%); } .mat--brass{ background: repeating-linear-gradient(101deg, rgba(255,255,255,.22) 0 1px, transparent 1px 3px, rgba(28,27,25,.14) 3px 4px, transparent 4px 9px), linear-gradient(120deg,#C9A76B 0%,#B08D57 44%,#8E6F3F 100%); } .mat--limewash{ background: radial-gradient(ellipse 60% 44% at 26% 22%,rgba(255,255,255,.85),transparent 70%), radial-gradient(ellipse 52% 40% at 74% 78%,rgba(214,206,192,.6),transparent 72%), linear-gradient(140deg,#F7F4EE 0%,#EDE8DE 55%,#E0D8CA 100%); } .mat--glass{ background: repeating-linear-gradient(78deg,rgba(244,240,232,.28) 0 2px,transparent 2px 22px), linear-gradient(135deg,#8D9A96 0%,#6E7B78 55%,#4E5957 100%); } /* ratio helpers */ .r-4x5{aspect-ratio:4/5} .r-1x1{aspect-ratio:1/1} .r-3x2{aspect-ratio:3/2} .r-16x9{aspect-ratio:16/9} .r-2x3{aspect-ratio:2/3} .r-5x4{aspect-ratio:5/4} /* --- 7. Header / nav ----------------------------------------------------- */ .site-header{ position:sticky;top:0;z-index:100; border-bottom:1px solid var(--rule); } /* Blur lives on a pseudo-element: backdrop-filter on the header itself would make it the containing block for the position:fixed mobile nav and clip the overlay. */ .site-header::before{ content:"";position:absolute;inset:0;z-index:-1; background:rgba(244,240,232,.92); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); transition:background var(--dur) var(--ease); } @supports not (backdrop-filter:blur(2px)){.site-header::before{background:var(--limewash)}} .site-header.is-condensed::before{background:var(--limewash)} .header-inner{ display:flex;align-items:center;justify-content:space-between;gap:var(--space-3); min-height:80px;padding-block:var(--space-2); transition:min-height var(--dur) var(--ease); } .is-condensed .header-inner{min-height:62px} .wordmark{display:flex;align-items:baseline;gap:.6rem;min-height:44px;align-self:center;position:relative;z-index:101} .wordmark__name{ font-family:var(--body);font-size:var(--t-md);font-weight:600; letter-spacing:.3em;text-transform:uppercase;color:var(--ironstone);line-height:1; } .wordmark__sub{ font-family:var(--display);font-style:italic;font-size:var(--t-sm); color:var(--iroko);line-height:1; padding-left:.6rem;border-left:1px solid var(--brass); } @media (max-width:520px){.wordmark__sub{display:none}} .nav{display:flex;align-items:center;gap:var(--space-1)} .nav a{ display:inline-flex;align-items:center; min-height:44px;padding:0 .875rem; font-size:var(--t-sm);font-weight:500;letter-spacing:.02em; color:var(--ink-muted); position:relative; transition:color var(--dur) var(--ease); } .nav a:hover{color:var(--ironstone)} .nav a::after{ content:"";position:absolute;left:.875rem;right:.875rem;bottom:14px;height:1px; background:var(--laterite);transform:scaleX(0);transform-origin:left; transition:transform var(--dur) var(--ease); } .nav a:hover::after{transform:scaleX(1)} .nav a[aria-current="page"]{color:var(--ironstone);font-weight:600} .nav a[aria-current="page"]::after{transform:scaleX(1);background:var(--brass)} .nav__cta{margin-left:var(--space-2)} .nav__cta.btn{color:var(--limewash);padding:.75rem 1.5rem;min-height:44px;font-weight:500} .nav__cta.btn:hover{color:var(--limewash);background:var(--laterite)} .nav__cta.btn::after{display:none} .nav-toggle{ display:none; width:48px;height:48px;align-items:center;justify-content:center; background:transparent;border:1px solid var(--rule-strong);cursor:pointer; position:relative;z-index:101; } .nav-toggle span{display:block;width:20px;height:1px;background:var(--ironstone);position:relative;transition:background var(--dur-fast)} .nav-toggle span::before,.nav-toggle span::after{ content:"";position:absolute;left:0;width:20px;height:1px;background:var(--ironstone); transition:transform var(--dur) var(--ease),top var(--dur) var(--ease); } .nav-toggle span::before{top:-6px} .nav-toggle span::after{top:6px} .nav-toggle[aria-expanded="true"] span{background:transparent} .nav-toggle[aria-expanded="true"] span::before{top:0;transform:rotate(45deg)} .nav-toggle[aria-expanded="true"] span::after{top:0;transform:rotate(-45deg)} @media (max-width:900px){ .nav-toggle{display:inline-flex} .nav{ position:fixed;inset:0;z-index:99; flex-direction:column;align-items:flex-start;justify-content:center; gap:0;padding:var(--space-7) var(--gutter); background:var(--limewash); transform:translateY(-100%); transition:transform var(--dur-slow) var(--ease); overflow-y:auto; visibility:hidden; } .nav[data-open="true"]{transform:translateY(0);visibility:visible} .nav a{ font-family:var(--display);font-size:var(--t-2xl);font-weight:300; letter-spacing:0;color:var(--ironstone);padding:0; min-height:64px;width:100%; border-bottom:1px solid var(--rule); } .nav a::after{display:none} .nav__cta{margin:var(--space-4) 0 0;width:100%} .nav__cta.btn{font-family:var(--body);font-size:var(--t-sm);border:0} body[data-nav-open="true"]{overflow:hidden} } /* --- 8. Hero ------------------------------------------------------------- */ .hero{position:relative;padding-block:var(--space-7) var(--space-6);overflow:hidden} .hero__grid{align-items:end} .hero__copy{grid-column:1/span 7} .hero__art{grid-column:9/span 4;align-self:stretch;min-height:22rem} .hero__title{margin-block:var(--space-3);max-inline-size:20ch} .hero__meta{ display:flex;flex-wrap:wrap;gap:var(--space-1) var(--space-3); font-size:var(--t-xs);font-weight:500;letter-spacing:.14em;text-transform:uppercase; color:var(--ink-muted); } .hero__meta li{display:flex;align-items:center;gap:var(--space-3)} .hero__meta li+li::before{content:"";width:1px;height:12px;background:var(--rule-strong)} .hero__actions{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:var(--space-4)} @media (max-width:1000px){ .hero__copy{grid-column:1/-1} .hero__art{grid-column:1/-1;min-height:16rem;margin-top:var(--space-5)} } /* --- 9. Cards & media ---------------------------------------------------- */ .card{ background:var(--surface); border:1px solid var(--rule); padding:var(--space-4); height:100%; transition:border-color var(--dur) var(--ease),transform var(--dur) var(--ease); } .card--flush{padding:0;overflow:hidden} .card__body{padding:var(--space-4)} .card:hover{border-color:var(--rule-strong)} .tile{position:relative;display:block;overflow:hidden;background:var(--surface-2)} .tile__mat{transition:transform var(--dur-slow) var(--ease),filter var(--dur) var(--ease)} .tile:hover .tile__mat,.tile:focus-visible .tile__mat{transform:scale(1.035)} .tile__cap{ position:absolute;inset:auto 0 0 0; padding:var(--space-3); background:linear-gradient(0deg,rgba(28,27,25,.9) 0%,rgba(28,27,25,.55) 55%,transparent 100%); color:var(--limewash); } .tile__cap .k{ font-size:var(--t-xs);font-weight:600;letter-spacing:.16em;text-transform:uppercase; color:var(--brass); } .tile__cap .t{font-family:var(--display);font-size:var(--t-lg);font-weight:400;line-height:1.15;margin-top:.35rem} .tile__cap .m{font-size:var(--t-sm);color:#CFC8BC;margin-top:.25rem} /* Work grid — asymmetric editorial rhythm */ .work-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--space-4) var(--space-3)} .work-item{grid-column:span 6} .work-item--wide{grid-column:span 7} .work-item--narrow{grid-column:span 5} .work-item--full{grid-column:1/-1} .work-item[hidden]{display:none} @media (max-width:780px){ .work-item,.work-item--wide,.work-item--narrow{grid-column:1/-1} } .work-meta{ display:flex;flex-wrap:wrap;gap:var(--space-1) var(--space-3); margin-top:var(--space-2); font-size:var(--t-xs);font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-muted); } /* --- 10. Filter chips ---------------------------------------------------- */ .filters{ display:flex;flex-wrap:wrap;gap:var(--space-1); padding-block:var(--space-3); } .chip{ min-height:44px;padding:.625rem 1.125rem; background:transparent;border:1px solid var(--rule-strong); font-size:var(--t-sm);font-weight:500;letter-spacing:.03em;color:var(--ink-muted); cursor:pointer; transition:background var(--dur) var(--ease),color var(--dur) var(--ease),border-color var(--dur) var(--ease); white-space:nowrap; /* chips never wrap mid-label */ } .chip:hover{border-color:var(--ironstone);color:var(--ironstone)} .chip[aria-pressed="true"]{background:var(--ironstone);border-color:var(--ironstone);color:var(--limewash)} .chip .n{ margin-left:.5rem;font-size:var(--t-xs);font-variant-numeric:tabular-nums;opacity:.7; } .filter-status{font-size:var(--t-sm);color:var(--ink-muted);min-height:1.5rem} /* --- 11. Process / numbered steps --------------------------------------- */ .step{ display:grid;grid-template-columns:5.5rem 1fr;gap:var(--space-4); padding-block:var(--space-5); border-top:1px solid var(--rule); } .steps .step:last-child{border-bottom:1px solid var(--rule)} .step__n{ font-family:var(--display);font-size:var(--t-3xl);font-weight:300;line-height:.9; color:var(--ink-accent);font-variant-numeric:tabular-nums; } .step__body{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4)} @media (max-width:860px){ .step{grid-template-columns:1fr;gap:var(--space-2)} .step__body{grid-template-columns:1fr} } /* Definition pairs */ .dl-pairs dt{ font-size:var(--t-xs);font-weight:600;letter-spacing:.14em;text-transform:uppercase; color:var(--ink-muted);margin-bottom:.4rem; } .dl-pairs dd+dt{margin-top:var(--space-3)} .dl-pairs dd{font-size:var(--t-sm);color:var(--ink)} /* Ticked / crossed lists */ .list-mark li{ display:grid;grid-template-columns:1.25rem 1fr;gap:.75rem; padding-block:.4rem;font-size:var(--t-sm); } .list-mark li svg{width:1.25rem;height:1.25rem;margin-top:.15rem;flex:none} .list-mark--yes li svg{color:var(--ink-accent)} .list-mark--no li{color:var(--ink-muted)} /* --- 12. Material swatch strip ------------------------------------------ */ .swatches{display:grid;grid-template-columns:repeat(6,1fr);gap:var(--space-2)} .swatch{display:block} .swatch__chip{aspect-ratio:1/1;border:1px solid var(--rule)} .swatch__name{ margin-top:.625rem;font-size:var(--t-xs);font-weight:600; letter-spacing:.1em;text-transform:uppercase; } .swatch__note{font-size:var(--t-xs);color:var(--ink-muted);letter-spacing:0;text-transform:none;font-weight:400} @media (max-width:860px){.swatches{grid-template-columns:repeat(3,1fr)}} @media (max-width:420px){.swatches{grid-template-columns:repeat(2,1fr)}} /* --- 13. Stat row ------------------------------------------------------- */ .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-3)} .stat{padding-top:var(--space-3);border-top:1px solid var(--rule-strong)} .stat__v{font-family:var(--display);font-size:var(--t-2xl);font-weight:300;line-height:1;font-variant-numeric:tabular-nums} .stat__k{margin-top:.5rem;font-size:var(--t-xs);font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-muted)} @media (max-width:860px){.stats{grid-template-columns:repeat(2,1fr);gap:var(--space-4) var(--space-3)}} /* --- 14. Forms ---------------------------------------------------------- */ .form{display:grid;gap:var(--space-3)} .field{display:grid;gap:.4rem} .field__label{ font-size:var(--t-xs);font-weight:600;letter-spacing:.12em;text-transform:uppercase; color:var(--ink); } .field__req{color:var(--laterite);margin-left:.25rem} .field__hint{font-size:var(--t-sm);color:var(--ink-muted);line-height:1.45} .field__control{ min-height:52px;padding:.875rem 1rem; background:#FBF9F5; border:1px solid var(--rule-strong); border-radius:0; font-size:var(--t-base); transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease); width:100%; } textarea.field__control{min-height:9.5rem;resize:vertical;line-height:1.55} select.field__control{ appearance:none;-webkit-appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--ironstone) 50%), linear-gradient(135deg,var(--ironstone) 50%,transparent 50%); background-position:calc(100% - 20px) 23px,calc(100% - 14px) 23px; background-size:6px 6px,6px 6px; background-repeat:no-repeat; padding-right:2.75rem; } .field__control:hover{border-color:var(--ironstone)} .field__control:focus{border-color:var(--ironstone);background:#fff} .field__control[aria-invalid="true"]{border-color:var(--laterite);border-width:2px;background:#FDF6F2} .field__error{ display:none; font-size:var(--t-sm);font-weight:500;color:#8A3F28; align-items:center;gap:.4rem; } .field__error[data-shown="true"]{display:flex} .field-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3)} @media (max-width:680px){.field-row{grid-template-columns:1fr}} .form-summary{ display:none; padding:var(--space-3); border:2px solid var(--laterite); background:#FDF6F2; } .form-summary[data-shown="true"]{display:block} .form-summary h2{font-size:var(--t-base);font-weight:600;font-family:var(--body);color:#8A3F28} .form-summary ol{margin-top:.5rem;padding-left:1.25rem;list-style:decimal} .form-summary a{font-size:var(--t-sm);color:#8A3F28;text-decoration:underline;text-underline-offset:3px} .form-note{font-size:var(--t-sm);color:var(--ink-muted)} .form-done{ display:none;padding:var(--space-4);border:1px solid var(--rule-strong);background:var(--surface); } .form-done[data-shown="true"]{display:block} /* Contact detail list */ .contact-list{display:grid;gap:var(--space-3)} .contact-list dt{ font-size:var(--t-xs);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-muted); } .contact-list dd{margin-top:.35rem;font-size:var(--t-base)} .contact-list dd a{border-bottom:1px solid var(--rule-strong);transition:border-color var(--dur) var(--ease)} .contact-list dd a:hover{border-color:var(--laterite)} /* --- 15. Footer --------------------------------------------------------- */ .site-footer{background:var(--ironstone);color:var(--limewash);padding-block:var(--space-6) var(--space-4)} .footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1.2fr;gap:var(--space-5) var(--space-3)} .site-footer h2{ font-size:var(--t-xs);font-weight:600;letter-spacing:.16em;text-transform:uppercase; color:var(--brass);margin-bottom:var(--space-2);font-family:var(--body); } .site-footer a{color:#CFC8BC;font-size:var(--t-sm);display:inline-flex;min-height:36px;align-items:center;transition:color var(--dur) var(--ease)} .site-footer a:hover{color:var(--limewash)} .site-footer p{color:#CFC8BC;font-size:var(--t-sm)} .site-footer .tagline{ font-family:var(--display);font-style:italic;font-size:var(--t-xl);font-weight:300; color:var(--limewash);max-inline-size:18ch;line-height:1.15; } .footer-bottom{ display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-4);justify-content:space-between; margin-top:var(--space-6);padding-top:var(--space-3); border-top:1px solid #3A3630; font-size:var(--t-xs);color:#9B9488;letter-spacing:.06em; } .site-footer :focus-visible{outline-color:var(--limewash)} @media (max-width:900px){.footer-grid{grid-template-columns:1fr 1fr}} @media (max-width:520px){.footer-grid{grid-template-columns:1fr}} /* --- 16. Page masthead -------------------------------------------------- */ .masthead{padding-block:var(--space-6) var(--space-5);border-bottom:1px solid var(--rule)} .masthead__grid{align-items:end} .masthead__copy{grid-column:1/span 7} .masthead__aside{grid-column:9/span 4} @media (max-width:1000px){ .masthead__copy,.masthead__aside{grid-column:1/-1} .masthead__aside{margin-top:var(--space-4)} } /* --- 17. Generic 2-up / 3-up -------------------------------------------- */ .cols-2{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-5)} .cols-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-4)} .cols-4{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-3)} .split{display:grid;grid-template-columns:5fr 7fr;gap:var(--space-6);align-items:center} .split--rev{grid-template-columns:7fr 5fr} @media (max-width:1000px){.cols-3,.cols-4{grid-template-columns:repeat(2,1fr)}} @media (max-width:860px){.cols-2,.split,.split--rev{grid-template-columns:1fr;gap:var(--space-5)}} @media (max-width:640px){.cols-3,.cols-4{grid-template-columns:1fr}} /* Discipline block (Craft page) */ .discipline{ display:grid;grid-template-columns:4fr 8fr;gap:var(--space-5); padding-block:var(--space-6);border-top:1px solid var(--rule); scroll-margin-top:96px; /* clears the sticky header on anchor jumps */ } .discipline:last-of-type{border-bottom:1px solid var(--rule)} .discipline__idx{ font-family:var(--display);font-size:var(--t-lg);font-weight:400;color:var(--ink-accent); font-variant-numeric:tabular-nums; } .discipline__spec{ display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3);margin-top:var(--space-4); } @media (max-width:860px){ .discipline{grid-template-columns:1fr;gap:var(--space-3)} .discipline__spec{grid-template-columns:1fr} } /* --- 17b. Project detail + lightbox ------------------------------------- */ .work-detail[hidden]{display:none} /* No-JS fallback: the #detail-* anchor reveals the panel inline */ .no-js .work-detail:target{ display:block;margin-top:var(--space-4);padding:var(--space-4); border:1px solid var(--rule);background:var(--surface); } .detail-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-2)} @media (max-width:640px){.detail-gallery{grid-template-columns:1fr 1fr}.detail-gallery>:first-child{grid-column:1/-1;aspect-ratio:3/2}} .lightbox{ border:0;padding:0;margin:auto; width:min(96vw,80rem);max-height:92vh; background:var(--limewash);color:var(--ironstone); overflow:auto;overscroll-behavior:contain; box-shadow:0 30px 80px rgba(28,27,25,.45); } .lightbox::backdrop{background:rgba(28,27,25,.8)} .lightbox[open]{animation:lbIn var(--dur) var(--ease)} @keyframes lbIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}} .lightbox__bar{ position:sticky;top:0;z-index:2; display:flex;align-items:center;justify-content:space-between;gap:var(--space-2); padding:var(--space-2) var(--space-4); background:rgba(244,240,232,.96);border-bottom:1px solid var(--rule); } .lightbox__count{font-size:var(--t-xs);font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-muted);font-variant-numeric:tabular-nums} .lightbox__nav{display:flex;gap:var(--space-1)} .lightbox__nav button{ width:48px;height:48px;display:grid;place-items:center; background:transparent;border:1px solid var(--rule-strong);cursor:pointer;color:var(--ironstone); transition:background var(--dur) var(--ease),color var(--dur) var(--ease),border-color var(--dur) var(--ease); } .lightbox__nav button:hover{background:var(--ironstone);color:var(--limewash);border-color:var(--ironstone)} .lightbox__body{padding:var(--space-5) var(--space-4) var(--space-4)} .lightbox__body:focus{outline:none} .lightbox__foot{ display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-2); padding:var(--space-3) var(--space-4) var(--space-4);border-top:1px solid var(--rule); } kbd{ font:500 .8em/1 var(--body);padding:.2em .45em;border:1px solid var(--rule-strong); border-bottom-width:2px;border-radius:3px;background:#FBF9F5;color:var(--ink); } @media (max-width:640px){ .lightbox{width:100vw;max-height:100vh;height:100vh} .lightbox__body{padding:var(--space-4) var(--space-3)} } body:has(dialog[open]){overflow:hidden} /* Tile hint appears on hover / focus */ .tile .tile__cap .k{opacity:0;transform:translateY(6px);transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease)} .tile:hover .tile__cap .k,.tile:focus-visible .tile__cap .k{opacity:1;transform:none} .work-item .tile .tile__cap{padding:var(--space-2) var(--space-3)} .work-item h3 a{border-bottom:1px solid transparent;transition:border-color var(--dur) var(--ease)} .work-item h3 a:hover{border-color:var(--laterite)} .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} .form[hidden]{display:none} /* --- 18. CTA band ------------------------------------------------------- */ .cta-band{position:relative;overflow:hidden;padding-block:var(--space-7)} .cta-band__inner{position:relative;z-index:2;text-align:center;display:grid;justify-items:center;gap:var(--space-3)} .cta-band__bg{position:absolute;inset:0;z-index:1;opacity:.5} .cta-band .display{max-inline-size:22ch} /* --- 19. Motion (reveal) ------------------------------------------------ */ [data-reveal]{ opacity:0; transform:translateY(14px); transition:opacity 400ms var(--ease),transform 400ms var(--ease); /* subtle tier: 300–400ms */ will-change:opacity,transform; } [data-reveal].is-in{opacity:1;transform:none;will-change:auto} .no-js [data-reveal]{opacity:1;transform:none} @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*::before,*::after{ animation-duration:.01ms!important;animation-iteration-count:1!important; transition-duration:.01ms!important; } [data-reveal]{opacity:1!important;transform:none!important} .tile:hover .tile__mat{transform:none} } /* --- 20. Print ---------------------------------------------------------- */ @media print{ .site-header,.nav-toggle,.cta-band,.filters{display:none} body{background:#fff;color:#000} .mat{background:#eee!important} }