:root{ --surface:#F4F3EF; --surface-raised:#FBFAF8; --surface-sunken:#E9E7E0; --panel:#121417; --panel-border:#2A2F35; --border-hairline:#DEDBD2; --border:#C9C6BE; --border-strong:#8B8779; --heading:#14181B; --body:#3C4147; --muted:#5F6369; --on-panel-heading:#F4F3EF; --on-panel-body:#C9C6BE; --on-panel-muted:#9DA1A7; --accent:#6A3F96; --accent-hover:#58347C; --accent-text:#602F90; --accent-soft:#F0E9F6; --accent-on-panel:#BFA4DA; --focus-ring:#25528C; --verdict-verified:#155C46; --verdict-indicative:#25528C; --verdict-insufficient:#5F6369; --verdict-refused:#14181B; /* action - production value where a control carries a white label; on this estate the control is an orange FRAME with a paper inset and an ink label (measured 17.1:1 ink on paper) */ --action:#C24E0F; /* phosphor - bounded utility token: instrument state, technical annotation, figure emphasis */ --phosphor:#43610A; --phosphor-on-dark:#A6E24C; /* ambient expression - OPTION 2 (Founder choice, 18 Sep 2026): signature-pack hue and chroma, lightness respaced monotonically. L* 76.04 / 69.11 / 62.06 / 54.96 / 36.04; steps 6.93 / 7.05 / 7.10 / 18.93 (floor 6.0). */ --amb-sea-glass:#A9C1B6; --amb-aqua:#7CB2B6; --amb-periwinkle:#8D94BC; --amb-soft-violet:#9379AD; --amb-violet-anchor:#6B4097; --holvem-fold:31deg; /* a 31 deg chamfer: dy/dx = tan(31) = 0.6009 */ --ch-x:36.6px; --ch-y:22px; /* page semantics - condensation is aqua, ingress is soft violet, used consistently */ --cond:#7CB2B6; --cond-deep:#3E8A90; --cond-ink:#1F5D62; --ingr:#9379AD; --ingr-deep:#6B4097; --ingr-ink:#4E2F73; --font:"Geist", Inter, "Helvetica Neue", Arial, system-ui, sans-serif; --frame:1296px; --gutter:16px; --r:8px; --r-field:4px; --ease:cubic-bezier(.2,.7,.2,1); --dur:.28s; --mono:"Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace; } @media (min-width:720px){ :root{ --gutter:32px; } } *,*::before,*::after{ box-sizing:border-box; } html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; } body{ margin:0; background:var(--surface); color:var(--body); font-family:var(--font); font-size:16px; line-height:1.55; -webkit-font-smoothing:antialiased; overflow-x:hidden; } h1,h2,h3,h4,p,ul,ol,figure,fieldset{ margin:0; } fieldset{ padding:0; border:0; min-width:0; } legend{ padding:0; } img{ display:block; max-width:100%; height:auto; } a{ color:var(--accent-text); } b{ font-weight:600; } .frame{ width:100%; max-width:var(--frame); margin:0 auto; padding:0 var(--gutter); } .sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; } :focus-visible{ outline:2px solid var(--focus-ring); outline-offset:3px; } /* ---------- type ---------- */ .kicker{ font-size:12px; letter-spacing:.12em; text-transform:uppercase; font-weight:600; color:var(--muted); display:flex; align-items:center; gap:10px; } .kicker b{ font-variant-numeric:tabular-nums; color:var(--heading); } .kicker b::after{ content:""; display:inline-block; width:14px; height:1px; background:var(--border-strong); margin-left:10px; vertical-align:middle; } h1{ font-size:clamp(38px,5.2vw,60px); line-height:1.08; letter-spacing:-1.2px; font-weight:600; color:var(--heading); text-wrap:balance; } .h2{ font-size:clamp(28px,3.4vw,40px); line-height:1.12; letter-spacing:-.8px; font-weight:600; color:var(--heading); text-wrap:balance; max-width:22ch; } .lede{ font-size:17.5px; line-height:1.55; color:var(--body); max-width:62ch; } .deck{ font-size:19px; line-height:1.5; color:var(--body); max-width:56ch; } .sec-head{ display:grid; gap:14px; } .sec-head .lede{ margin-top:4px; } @media (min-width:1000px){ .sec-head{ grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:48px; align-items:end; } .sec-head .lede{ margin-top:0; } } /* ---------- ambient surfaces (integration kit construction) ---------- The plate is carried on a pseudo-element over the section's locked ground, at a DOSE: a uniform alpha composite. It changes the amplitude of every plane step by one factor and changes no edge's width, position or angle. Dosing is not softening. Plates are SVG polygons - no interpolation crosses a plane edge anywhere. */ .amb{ position:relative; isolation:isolate; } .amb::before{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none; background-repeat:no-repeat; background-position:center; background-size:cover; opacity:var(--amb-dose,1); } .amb > *{ position:relative; z-index:1; } .amb-c-light::before{ background-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 1600 900%22 preserveAspectRatio=%22xMidYMid slice%22%3E%3Cdefs%3E%3ClinearGradient id=%22gc-light-v50%22 gradientUnits=%22userSpaceOnUse%22 x1=%22-429.98%22 y1=%22-750.03%22 x2=%22291.07%22 y2=%22450.00%22%3E%3Cstop offset=%220%22 stop-color=%22%23A1B8AE%22/%3E%3Cstop offset=%221%22 stop-color=%22%23ADC4B9%22/%3E%3C/linearGradient%3E%3ClinearGradient id=%22gc-light-v51%22 gradientUnits=%22userSpaceOnUse%22 x1=%22673.14%22 y1=%22220.43%22 x2=%22811.07%22 y2=%22450.00%22%3E%3Cstop offset=%220%22 stop-color=%22%2376AAAE%22/%3E%3Cstop offset=%221%22 stop-color=%22%2382B5B9%22/%3E%3C/linearGradient%3E%3ClinearGradient id=%22gc-light-v52%22 gradientUnits=%22userSpaceOnUse%22 x1=%221354.78%22 y1=%22123.31%22 x2=%221551.07%22 y2=%22450.00%22%3E%3Cstop offset=%220%22 stop-color=%22%23878DB4%22/%3E%3Cstop offset=%221%22 stop-color=%22%239299BF%22/%3E%3C/linearGradient%3E%3ClinearGradient id=%22gc-light-v53%22 gradientUnits=%22userSpaceOnUse%22 x1=%221859.66%22 y1=%22264.58%22 x2=%221971.07%22 y2=%22450.00%22%3E%3Cstop offset=%220%22 stop-color=%22%238C74A5%22/%3E%3Cstop offset=%221%22 stop-color=%22%23987FB1%22/%3E%3C/linearGradient%3E%3ClinearGradient id=%22gc-light-v54%22 gradientUnits=%22userSpaceOnUse%22 x1=%221971.07%22 y1=%22450.00%22 x2=%222692.13%22 y2=%221650.03%22%3E%3Cstop offset=%220%22 stop-color=%22%2372499C%22/%3E%3Cstop offset=%221%22 stop-color=%22%23663D90%22/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpolygon points=%22-6000.000,0.000 1040.000,0.000 -457.852,900.000 -7497.852,900.000%22 fill=%22url%28%23gc-light-v50%29%22 shape-rendering=%22crispEdges%22/%3E%3Cpolygon points=%221040.000,0.000 1560.000,0.000 62.148,900.000 -457.852,900.000%22 fill=%22url%28%23gc-light-v51%29%22 shape-rendering=%22crispEdges%22/%3E%3Cpolygon points=%221560.000,0.000 2300.000,0.000 802.148,900.000 62.148,900.000%22 fill=%22url%28%23gc-light-v52%29%22 shape-rendering=%22crispEdges%22/%3E%3Cpolygon points=%222300.000,0.000 2720.000,0.000 1222.148,900.000 802.148,900.000%22 fill=%22url%28%23gc-light-v53%29%22 shape-rendering=%22crispEdges%22/%3E%3Cpolygon points=%222720.000,0.000 9000.000,0.000 7502.148,900.000 1222.148,900.000%22 fill=%22url%28%23gc-light-v54%29%22 shape-rendering=%22crispEdges%22/%3E%3C/svg%3E"); } .amb-b-light::before{ background-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 1600 900%22 preserveAspectRatio=%22xMidYMid slice%22%3E%3Cdefs%3E%3ClinearGradient id=%22gb-light0%22 gradientUnits=%22userSpaceOnUse%22 x1=%22-849.98%22 y1=%22-750.03%22 x2=%22-128.93%22 y2=%22450.00%22%3E%3Cstop offset=%220%22 stop-color=%22%23D0CDC4%22/%3E%3Cstop offset=%221%22 stop-color=%22%23D7D4CC%22/%3E%3C/linearGradient%3E%3ClinearGradient id=%22gb-light1%22 gradientUnits=%22userSpaceOnUse%22 x1=%22-128.93%22 y1=%22450.00%22 x2=%22-28.13%22 y2=%22617.76%22%3E%3Cstop offset=%220%22 stop-color=%22%23EAE8E1%22/%3E%3Cstop offset=%221%22 stop-color=%22%23E2E0D9%22/%3E%3C/linearGradient%3E%3ClinearGradient id=%22gb-light2%22 gradientUnits=%22userSpaceOnUse%22 x1=%22251.07%22 y1=%22450.00%22 x2=%22357.18%22 y2=%22626.59%22%3E%3Cstop offset=%220%22 stop-color=%22%23F4F3EF%22/%3E%3Cstop offset=%221%22 stop-color=%22%23EDECE8%22/%3E%3C/linearGradient%3E%3ClinearGradient id=%22gb-light3%22 gradientUnits=%22userSpaceOnUse%22 x1=%22651.07%22 y1=%22450.00%22 x2=%22757.18%22 y2=%22626.59%22%3E%3Cstop offset=%220%22 stop-color=%22%23FBFAF8%22/%3E%3Cstop offset=%221%22 stop-color=%22%23F3F2F1%22/%3E%3C/linearGradient%3E%3ClinearGradient id=%22gb-light4%22 gradientUnits=%22userSpaceOnUse%22 x1=%221051.07%22 y1=%22450.00%22 x2=%221170.44%22 y2=%22648.66%22%3E%3Cstop offset=%220%22 stop-color=%22%23FFFFFF%22/%3E%3Cstop offset=%221%22 stop-color=%22%23F7F7F7%22/%3E%3C/linearGradient%3E%3ClinearGradient id=%22gb-light5%22 gradientUnits=%22userSpaceOnUse%22 x1=%221501.07%22 y1=%22450.00%22 x2=%221607.18%22 y2=%22626.59%22%3E%3Cstop offset=%220%22 stop-color=%22%23FBFAF8%22/%3E%3Cstop offset=%221%22 stop-color=%22%23F3F2F1%22/%3E%3C/linearGradient%3E%3ClinearGradient id=%22gb-light6%22 gradientUnits=%22userSpaceOnUse%22 x1=%221901.07%22 y1=%22450.00%22 x2=%222622.13%22 y2=%221650.03%22%3E%3Cstop offset=%220%22 stop-color=%22%23F4F3EF%22/%3E%3Cstop offset=%221%22 stop-color=%22%23EDECE8%22/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpolygon points=%22-6000.000,0.000 620.000,0.000 -877.852,900.000 -7497.852,900.000%22 fill=%22url%28%23gb-light0%29%22 shape-rendering=%22crispEdges%22/%3E%3Cpolygon points=%22620.000,0.000 1000.000,0.000 -497.852,900.000 -877.852,900.000%22 fill=%22url%28%23gb-light1%29%22 shape-rendering=%22crispEdges%22/%3E%3Cpolygon points=%221000.000,0.000 1400.000,0.000 -97.852,900.000 -497.852,900.000%22 fill=%22url%28%23gb-light2%29%22 shape-rendering=%22crispEdges%22/%3E%3Cpolygon points=%221400.000,0.000 1800.000,0.000 302.148,900.000 -97.852,900.000%22 fill=%22url%28%23gb-light3%29%22 shape-rendering=%22crispEdges%22/%3E%3Cpolygon points=%221800.000,0.000 2250.000,0.000 752.148,900.000 302.148,900.000%22 fill=%22url%28%23gb-light4%29%22 shape-rendering=%22crispEdges%22/%3E%3Cpolygon points=%222250.000,0.000 2650.000,0.000 1152.148,900.000 752.148,900.000%22 fill=%22url%28%23gb-light5%29%22 shape-rendering=%22crispEdges%22/%3E%3Cpolygon points=%222650.000,0.000 9000.000,0.000 7502.148,900.000 1152.148,900.000%22 fill=%22url%28%23gb-light6%29%22 shape-rendering=%22crispEdges%22/%3E%3C/svg%3E"); } /* ---------- furniture: HOLVEM Furniture Top (site-wide), as home-v1 carries it; the coloured signature (R1-03-15); the settled IA (R1-04-10): one item "Buildings & applications", two-column dropdown ---------- */ .response{ font-family:var(--mono); font-size:12px; line-height:18px; padding:12px var(--gutter); text-align:center; border-bottom:1px solid var(--border); color:var(--muted); background:var(--surface); } .response .tel{ color:var(--heading); white-space:nowrap; } .masthead{ position:relative; z-index:40; background:var(--surface); border-bottom:1px solid var(--border); } .masthead .frame{ display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:107px; padding-top:24px; padding-bottom:24px; } .masthead .logo{ display:inline-flex; align-items:center; flex-shrink:0; width:auto; height:auto; font-size:0; line-height:0; text-decoration:none; } .masthead .logo svg{ width:209.25px; height:58.33px; display:block; } .masthead .logo:focus-visible{ outline:2px solid var(--focus-ring); outline-offset:4px; } .masthead nav{ display:none; gap:24px; align-items:center; font-size:14px; line-height:24px; } .masthead nav > a, .masthead .navitem > a{ display:flex; align-items:center; gap:6px; color:var(--heading); text-decoration:none; padding:6px 0; } .masthead .navitem{ position:relative; } .masthead .navitem > a::after{ content:""; width:7px; height:7px; border-right:1.5px solid var(--muted); border-bottom:1.5px solid var(--muted); transform:translateY(-2px) rotate(45deg); } .masthead nav a[aria-current="page"], .masthead .navitem[data-current] > a{ box-shadow:inset 0 -2px 0 var(--heading); } .masthead .sub{ position:absolute; left:-12px; top:100%; padding:12px 0 0; display:none; z-index:20; min-width:288px; } .masthead .sub a{ display:block; padding:12px 18px; background:var(--surface-raised); border-left:1px solid var(--border); border-right:1px solid var(--border); font-size:14px; line-height:24px; color:var(--heading); text-decoration:none; } .masthead .sub a:first-child{ border-top:1px solid var(--border); border-radius:var(--r) var(--r) 0 0; } .masthead .sub a:last-child{ border-bottom:1px solid var(--border); border-radius:0 0 var(--r) var(--r); } .masthead .sub a:hover, .masthead .sub a:focus-visible{ background:var(--surface-sunken); } .masthead .sub a[aria-current="page"]{ box-shadow:inset 3px 0 0 var(--accent); } .masthead .navitem:hover .sub, .masthead .navitem:focus-within .sub, .masthead .navitem.is-open .sub{ display:block; } .masthead .navitem.is-closed .sub{ display:none; } .menu-button{ all:unset; cursor:pointer; display:inline-flex; align-items:center; gap:10px; font-size:14px; font-weight:600; color:var(--heading); padding:8px 12px; border:1.5px solid var(--border-strong); border-radius:var(--r); } .menu-button i{ width:16px; height:10px; border-top:2px solid var(--heading); border-bottom:2px solid var(--heading); position:relative; } .menu-button i::after{ content:""; position:absolute; left:0; right:0; top:2px; border-top:2px solid var(--heading); } .menu-button[aria-expanded="true"]{ background:var(--heading); color:var(--on-panel-heading); border-color:var(--heading); } .menu-button[aria-expanded="true"] i, .menu-button[aria-expanded="true"] i::after{ border-color:var(--on-panel-heading); } .menu-button:focus-visible{ outline:2px solid var(--focus-ring); outline-offset:3px; } .menu{ background:var(--surface-raised); border-bottom:1px solid var(--border); } .menu[hidden]{ display:none; } .menu-grid{ display:grid; gap:0; padding-top:12px; padding-bottom:20px; } .menu .mgroup{ padding:6px 0; border-bottom:1px solid var(--border); display:grid; } .menu .mhub{ font-weight:500; color:var(--heading); text-decoration:none; padding:8px 0; font-size:17px; } .menu .msub{ padding:6px 0 6px 18px; font-size:16px; color:var(--body); text-decoration:none; } .menu .msub[aria-current="page"]{ color:var(--heading); box-shadow:inset 3px 0 0 var(--accent); padding-left:15px; } .menu > .frame > .mhub{ padding:14px 0 6px; } .menu .tel{ display:block; padding:12px 0; font-size:14px; color:var(--muted); font-family:var(--mono); } @media (min-width:1110px){ .masthead nav{ display:flex; } .menu-button, .menu{ display:none !important; } } @media (min-width:1110px) and (max-width:1199px){ .masthead nav{ gap:14px; } .masthead nav a{ white-space:nowrap; } } @media (max-width:519px){ .response{ font-size:11px; line-height:16px; padding:10px var(--gutter); } .response .tel{ display:block; margin-top:2px; } } @media (min-width:1110px) and (max-width:1259px){ .masthead nav{ gap:12px; font-size:13.5px; } .masthead .frame{ gap:10px; } } .masthead .sub .subgroup{ display:block; padding:10px 18px 4px; background:var(--surface-raised); border-left:1px solid var(--border); border-right:1px solid var(--border); font-size:11px; letter-spacing:.12em; text-transform:uppercase; font-weight:600; color:var(--muted); } .menu .mgroup .msubgroup{ padding:8px 0 2px 18px; font-size:11px; letter-spacing:.12em; text-transform:uppercase; font-weight:600; color:var(--muted); } /* the masthead action is a BUTTON (R1-SITE-03; standard s9 masthead exemption): the served construction, a small arrow that travels on hover */ .masthead .desktop-cta{ display:none; align-items:center; gap:10px; padding:12px 24px; border:2px solid var(--border-strong); border-radius:var(--r); font-size:16px; line-height:24px; font-weight:400; color:var(--heading); text-decoration:none; white-space:nowrap; background:transparent; transition:background-color var(--dur), border-color var(--dur); } .masthead .desktop-cta svg{ width:14px; height:14px; flex:none; transition:transform var(--dur) var(--ease); } .masthead .desktop-cta:hover{ background:var(--surface-sunken); border-color:var(--heading); } .masthead .desktop-cta:hover svg{ transform:translateX(3px); } .masthead .desktop-cta:focus-visible{ outline:2px solid var(--focus-ring); outline-offset:3px; } @media (min-width:1110px){ .masthead .desktop-cta{ display:inline-flex; } } @media (min-width:1110px) and (max-width:1259px){ .masthead .desktop-cta{ font-size:14px; padding:9px 16px; gap:8px; } } /* the settled IA: one item, two columns */ .masthead .sub.sub-2{ min-width:560px; display:none; } .masthead .navitem:hover .sub-2, .masthead .navitem:focus-within .sub-2, .masthead .navitem.is-open .sub-2{ display:grid; grid-template-columns:1fr 1fr; } .masthead .navitem.is-closed .sub-2{ display:none; } .masthead .sub-2 > div{ display:grid; } .masthead .sub-2 > div:first-child a, .masthead .sub-2 > div:first-child .subgroup{ border-right:0; } .masthead .sub-2 > div:first-child a:first-child, .masthead .sub-2 > div:first-child .subgroup:first-child{ border-top:1px solid var(--border); border-radius:var(--r) 0 0 0; } .masthead .sub-2 > div:last-child .subgroup:first-child{ border-top:1px solid var(--border); border-radius:0 var(--r) 0 0; } .masthead .sub-2 > div:first-child a:last-child{ border-radius:0 0 0 var(--r); border-bottom:1px solid var(--border); } .masthead .sub-2 > div:last-child a:last-child{ border-radius:0 0 var(--r) 0; border-bottom:1px solid var(--border); } .masthead .sub-2 .subgroup{ border-top:0; } .masthead .sub-2 > div:first-child .subgroup{ border-radius:var(--r) 0 0 0; } .masthead .sub-2 .all{ font-weight:600; color:var(--accent-text); } /* the tablet single-line band (1110-1259) is where the masthead is tight: the item wraps to two lines inside the 107px masthead instead of pushing the CTA past the frame */ @media (min-width:1110px) and (max-width:1259px){ .masthead .navitem.nav-ba > a{ white-space:normal; max-width:88px; line-height:1.15; text-align:left; } .masthead .desktop-cta{ padding:12px 14px; font-size:15px; } } @media (min-width:1110px) and (max-width:1199px){ .masthead nav{ gap:8px; } .masthead .frame{ gap:8px; } .masthead .navitem.nav-ba > a{ max-width:80px; } } /* ---------- hero - the opening moment as IMAGERY: daylight cast through a fluted translucent panel, graded sea-glass -> aqua -> periwinkle -> violet (the Founder's reference, made with Artlist, generation 01a0b535-88a5-7859-87b9-83834adecc08 output 0). The colour is cast through a material, not floating behind content; the ribs are the edges. NO text sits on the image: the copy is on the paper sheet with one folded corner. The 31 deg guard governs plates, not photographs. ---------- */ .hero{ position:relative; padding:40px 0 64px; background:var(--surface); overflow:hidden; isolation:isolate; } .hero-media{ position:absolute; inset:0; z-index:0; background:#C9D6D9; } .hero-media img{ width:100%; height:112%; object-fit:cover; object-position:62% 0; } /* 112%: the reference crops above the floor line */ .hero > .frame{ position:relative; z-index:1; } @media (min-width:720px){ .hero{ padding:56px 0 80px; } .hero-media img{ object-position:50% 40%; } } @media (min-width:1000px){ .hero{ padding:72px 0 96px; } } .sheet-wrap{ position:relative; max-width:820px; } /* the sheet casts a hard shadow on the surface it lies on: an offset plane, no blur */ .sheet-wrap::before{ content:""; position:absolute; inset:0; transform:translate(-7px,9px); background:rgba(20,24,27,.11); border-radius:var(--r); clip-path:polygon(0 0, calc(100% - var(--ch-x)) 0, 100% var(--ch-y), 100% 100%, 0 100%); } .sheet{ position:relative; background:var(--surface-raised); border-radius:var(--r); padding:26px 24px 30px; max-width:820px; clip-path:polygon(0 0, calc(100% - var(--ch-x)) 0, 100% var(--ch-y), 100% 100%, 0 100%); } @media (min-width:720px){ .sheet{ padding:38px 44px 44px; } } /* the fold: the turned corner is a second plane in paper shadow; its crease is the same 31 deg line */ .sheet::after{ content:""; position:absolute; top:0; right:0; width:var(--ch-x); height:var(--ch-y); background:var(--surface-sunken); clip-path:polygon(0 0, 100% 100%, 0 100%); } .crumbs{ font-size:13px; color:var(--muted); display:flex; flex-wrap:wrap; gap:6px; margin-bottom:22px; } .crumbs a{ color:var(--muted); text-decoration:none; } .crumbs a:hover{ color:var(--heading); text-decoration:underline; } .crumbs [aria-current]{ color:var(--body); } .hero h1{ margin-top:12px; } .hero .deck{ margin-top:18px; } .hero-meta{ margin-top:26px; display:flex; flex-wrap:wrap; gap:10px 26px; font-size:14px; color:var(--body); } .hero-meta span::before{ content:""; display:inline-block; width:8px; height:8px; margin-right:9px; background:var(--cond-deep); clip-path:polygon(0 0, 100% 60%, 40% 100%); vertical-align:1px; } /* ---------- 01 the differential - paper; the photographs carry the colour ---------- */ .diff{ padding:72px 0 64px; } .pair{ margin-top:36px; display:grid; gap:20px; } @media (min-width:860px){ .pair{ grid-template-columns:1fr 1fr; gap:24px; } } .fig{ --fig-c:var(--cond); --fig-ink:var(--cond-ink); background:var(--surface-raised); border:1px solid var(--border-hairline); border-radius:var(--r); overflow:hidden; } .fig-ingr{ --fig-c:var(--ingr); --fig-ink:var(--ingr-ink); } .fig-media{ position:relative; aspect-ratio:4/3; background:var(--surface-sunken); } .fig-media img{ width:100%; height:100%; object-fit:cover; } .fig-label{ position:absolute; left:0; bottom:0; display:flex; align-items:stretch; } .fig-tag{ display:flex; align-items:center; white-space:nowrap; padding:9px 14px; background:var(--fig-c); color:var(--heading); font-size:12px; letter-spacing:.1em; text-transform:uppercase; font-weight:600; } .fig-name{ display:flex; align-items:center; padding:9px 18px 9px 14px; background:var(--surface-raised); color:var(--heading); font-size:15px; font-weight:600; clip-path:polygon(0 0, calc(100% - 13.2px) 0, 100% 100%, 0 100%); padding-right:26px; } .fig-facts{ list-style:none; padding:18px 20px 20px; display:grid; gap:12px; } .fig-facts li{ display:grid; grid-template-columns:12px 1fr; gap:12px; align-items:baseline; font-size:15px; line-height:1.45; color:var(--body); } .fig-facts li::before{ content:""; width:12px; height:9px; background:var(--fig-c); clip-path:polygon(0 0, 100% 60%, 40% 100%, 0 100%); position:relative; top:0; } .fig-facts b{ color:var(--heading); } .pair.is-in .fig-cond{ animation:fromLeft .6s var(--ease) both; } .pair.is-in .fig-ingr{ animation:fromRight .6s var(--ease) .08s both; } @keyframes fromLeft{ from{ opacity:0; transform:translateX(-14px);} to{ opacity:1; transform:none;} } @keyframes fromRight{ from{ opacity:0; transform:translateX(14px);} to{ opacity:1; transform:none;} } .pair-note{ margin-top:22px; display:grid; gap:6px 32px; padding:18px 0 0; border-top:1px solid var(--border); font-size:16px; } @media (min-width:860px){ .pair-note{ grid-template-columns:1fr 1fr auto; align-items:baseline; } } .pair-note b{ color:var(--heading); } .pair-note span{ color:var(--muted); font-size:14px; } /* ---------- if it is both - the leaflet. A three-panel concertina in paper: the panels alternate lit / half / lit as folded planes do, and each carries its plane colour as a cap. ---------- */ .both{ padding:64px 0 76px; border-top:1px solid var(--border-hairline); } .both-grid{ margin-top:36px; display:grid; gap:28px; } @media (min-width:1000px){ .both-grid{ grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr); gap:40px; align-items:start; } } .both-fig .cap{ margin-top:12px; font-size:14px; color:var(--muted); max-width:52ch; } .leaflet{ position:relative; display:grid; padding:0; margin:0; list-style:none; } @media (min-width:640px){ .leaflet{ grid-template-columns:repeat(3,minmax(0,1fr)); } } /* minmax(0,…): the panels must not widen past the frame between 1000 and 1260 (v2/v3 latent overflow, fixed v4) */ /* hard cast shadow plane under the leaflet, offset along the fold */ .leaflet::before{ content:""; position:absolute; inset:0; transform:translate(-8px,10px); background:var(--surface-sunken); border-radius:var(--r); z-index:0; } .panel{ position:relative; z-index:1; padding:0 0 22px; background:var(--surface-raised); display:grid; grid-template-rows:auto auto 1fr; } .panel:nth-child(2){ background:#F6F5F1; } .panel:first-child{ border-radius:var(--r) 0 0 var(--r); } .panel:last-child{ border-radius:0 var(--r) var(--r) 0; } @media (max-width:639px){ .panel{ border-radius:0 !important; } .panel:first-child{ border-radius:var(--r) var(--r) 0 0 !important; } .panel:last-child{ border-radius:0 0 var(--r) var(--r) !important; } } .panel + .panel{ border-left:1px solid var(--border-hairline); } @media (max-width:639px){ .panel + .panel{ border-left:0; border-top:1px solid var(--border-hairline); } } .panel-cap{ height:14px; background:var(--pc); clip-path:polygon(0 0, 100% 0, 100% 100%, 0 100%); } .panel:nth-child(1){ --pc:var(--amb-sea-glass); } .panel:nth-child(2){ --pc:var(--amb-aqua); } .panel:nth-child(3){ --pc:var(--amb-periwinkle); } .panel:last-child .panel-cap{ clip-path:polygon(0 0, calc(100% - 23.3px) 0, 100% 100%, 0 100%); } .panel-head{ display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:4px 12px; padding:18px 20px 0; min-width:0; } .panel h3{ font-size:20px; font-weight:600; letter-spacing:-.3px; color:var(--heading); } .panel-q{ font-size:12px; letter-spacing:.1em; text-transform:uppercase; font-weight:600; color:var(--muted); white-space:nowrap; } .panel p{ padding:10px 20px 0; font-size:15px; line-height:1.5; color:var(--body); } .panel p b{ color:var(--heading); } .both-cta{ margin-top:26px; display:flex; flex-wrap:wrap; align-items:center; gap:12px 18px; font-size:14px; color:var(--muted); } /* ---------- buttons - frame / paper inset / ink label ---------- */ .btn{ display:inline-flex; align-items:center; gap:10px; padding:12px 18px; border-radius:var(--r); font-size:15px; font-weight:600; text-decoration:none; color:var(--heading); background:var(--surface-raised); border:2px solid var(--heading); transition:transform var(--dur) var(--ease), background-color var(--dur), border-color var(--dur); } .btn svg{ width:16px; height:16px; } .btn:hover{ transform:translateY(-2px); } .btn-action{ border-color:var(--action); box-shadow:inset 0 0 0 3px var(--surface-raised); padding:13px 20px; } .btn-action:hover{ background:#FFF; } .btn-ghost{ border-color:var(--border-strong); } .btn-ghost:hover{ border-color:var(--heading); } /* R2 sweep (R1-08-08): the secondary action in the close is a text link, the construction carried from buildings-v6 */ .tlink{ display:inline-flex; align-items:center; gap:8px; font-size:15px; font-weight:600; color:var(--accent-text); text-decoration:underline; text-underline-offset:4px; text-decoration-thickness:1.5px; } .tlink:hover{ color:var(--heading); } .tlink::after{ content:""; width:7px; height:7px; border-right:1.5px solid currentColor; border-top:1.5px solid currentColor; transform:rotate(45deg); } .actions .tlink{ align-self:center; margin-left:8px; } /* ---------- 02 the instrument - Route B, diagnostic light. Raking light across paper; the plate is paper tones only (no ambient sequence, by construction). The light MOVES with the reading: one-shot 360ms translation per observation - angles and edges are unchanged by a translation. Text on the plate is --heading / --body only; the cards are raised paper. ---------- */ .inst{ --amb-dose:1; padding:72px 0 80px; background:var(--surface); overflow:hidden; } .inst::before{ inset:0 -40% 0 -40%; transform:translateX(var(--light-x, -14%)); transition:transform .36s var(--ease); } .inst[data-n="1"]{ --light-x:-4%; } .inst[data-n="2"]{ --light-x:6%; } .inst[data-n="3"]{ --light-x:16%; } .inst-grid{ margin-top:36px; display:grid; gap:28px; } @media (min-width:1000px){ .inst-grid{ grid-template-columns:minmax(0,1.5fr) minmax(320px,.9fr); gap:40px; align-items:start; } } .qgroup{ padding:22px 0 26px; border-top:1px solid var(--border); } .qgroup:first-of-type{ border-top:0; padding-top:0; } .qhead{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:14px; } .qhead h3{ font-size:19px; font-weight:600; letter-spacing:-.3px; color:var(--heading); display:flex; align-items:baseline; gap:12px; } .qhead .n{ font-size:12px; letter-spacing:.08em; font-weight:600; color:var(--phosphor); font-variant-numeric:tabular-nums; } .picked{ font-size:13px; color:var(--phosphor); font-weight:600; text-align:right; } .picked:not(:empty)::before{ content:""; display:inline-block; width:8px; height:8px; margin-right:8px; background:var(--phosphor); clip-path:polygon(0 0, 100% 60%, 40% 100%); } .opts{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; } .opt{ position:relative; display:block; cursor:pointer; min-width:0; } .opt-input{ position:absolute; opacity:0; width:1px; height:1px; margin:0; pointer-events:none; } .opt-card{ position:relative; display:flex; flex-direction:column; gap:8px; height:100%; padding:14px 14px 14px; background:var(--surface-raised); color:var(--heading); border:1.5px solid var(--border-hairline); border-radius:var(--r); overflow:hidden; transition:transform var(--dur) var(--ease), border-color var(--dur), background-color var(--dur); } .opt-icon{ width:calc(100% + 28px); margin:0 -14px; aspect-ratio:100/60; display:grid; place-items:center; } /* the drawing is cut at the card's edge, as the homepage section is cut at the edge of its wrap */ .ico{ width:100%; height:auto; display:block; overflow:hidden; transition:transform var(--dur) var(--ease); } .opt-title{ display:block; font-size:14.5px; line-height:1.3; font-weight:500; color:var(--heading); letter-spacing:-.1px; text-wrap:balance; padding-right:24px; } .opt-tick{ position:absolute; right:10px; bottom:10px; width:22px; height:22px; border-radius:50%; background:var(--phosphor); color:#FBFAF8; display:grid; place-items:center; transform:scale(0); transition:transform .28s var(--ease) .06s; } .opt-tick svg{ width:12px; height:12px; } @media (hover:hover){ .opt:hover .opt-card{ transform:translateY(-3px); border-color:var(--border-strong); } .opt:hover .ico{ transform:translateY(-3px); } } .opt:has(.opt-input:checked) .opt-card{ background:var(--surface-raised); border-color:var(--phosphor); animation:lock .36s var(--ease); } .opt:has(.opt-input:checked) .opt-tick{ transform:scale(1); } /* on selection the interior field beneath the sheet takes the homepage's own field gradient */ .opt:has(.opt-input:checked) .ico{ transform:translateY(-2px); } .opt:has(.opt-input:checked) .ico .field{ opacity:1; } .opt:has(.opt-input:focus-visible) .opt-card{ outline:2px solid var(--focus-ring); outline-offset:2px; } @keyframes lock{ 0%{ transform:translateY(-3px);} 45%{ transform:translateY(0) scale(.985);} 100%{ transform:none;} } @media (max-width:519px){ .opts{ grid-template-columns:1fr; gap:8px; } .opt-card{ flex-direction:row; align-items:center; gap:12px; padding:10px 12px; } .opt-icon{ width:112px; margin:0 0 0 -12px; height:auto; aspect-ratio:100/60; flex:none; } .opt-title{ font-size:15px; } } .inst-foot{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:10px 16px; margin-top:8px; font-size:14px; color:var(--body); } .reset{ all:unset; cursor:pointer; font-size:14px; font-weight:600; color:var(--heading); text-decoration:underline; text-underline-offset:3px; } .reset:focus-visible{ outline:2px solid var(--focus-ring); outline-offset:3px; border-radius:2px; } /* the reading - a paper card whose top edge is cut on the fold; the corner plane takes the state colour (aqua / violet) when a direction lands */ .rail{ position:sticky; top:24px; } .rail-card{ position:relative; background:var(--surface-raised); border:1px solid var(--border-hairline); border-radius:var(--r); padding:22px 22px 24px; overflow:hidden; } .rail-card::after{ content:""; position:absolute; top:0; right:0; width:54px; height:32.4px; background:var(--surface-sunken); clip-path:polygon(0 0, 100% 100%, 100% 0); transition:background-color .36s; } .rail-card[data-state="condensation"]::after{ background:var(--cond); } .rail-card[data-state="ingress"]::after{ background:var(--ingr); } .rail-card[data-state="both"]::after{ background:var(--amb-periwinkle); } .rail-kicker{ font-size:12px; letter-spacing:.12em; text-transform:uppercase; font-weight:600; color:var(--muted); } .rail-count{ margin-top:6px; font-size:14px; font-weight:600; color:var(--phosphor); font-variant-numeric:tabular-nums; } .meters{ margin-top:18px; display:grid; gap:12px; } .meter{ display:grid; grid-template-columns:1fr auto; gap:4px 10px; align-items:center; font-size:13px; color:var(--body); } .meter-l{ display:flex; align-items:center; gap:8px; } .meter-l i{ width:10px; height:8px; background:var(--m); clip-path:polygon(0 0, 100% 60%, 40% 100%, 0 100%); } .meter-v{ font-variant-numeric:tabular-nums; font-weight:600; color:var(--phosphor); font-size:12.5px; } .meter-bar{ grid-column:1 / -1; height:6px; background:var(--surface-sunken); border-radius:2px; overflow:hidden; } .meter-bar i{ display:block; height:100%; width:0; background:var(--phosphor); transition:width .4s var(--ease); } .meter-cond{ --m:var(--cond-deep); } .meter-ingr{ --m:var(--ingr-deep); } .mini{ display:none; } .result{ margin-top:20px; padding-top:18px; border-top:1px solid var(--border-hairline); } .res-state{ animation:resIn .35s var(--ease); } @keyframes resIn{ from{ opacity:0; transform:translateY(6px);} to{ opacity:1; transform:none;} } .verdict{ display:inline-block; font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; font-weight:600; color:var(--verdict-insufficient); padding:4px 8px; border:1px solid var(--border); border-radius:var(--r-field); } [data-verdict="indicative"] .verdict{ color:var(--verdict-indicative); border-color:var(--verdict-indicative); } .res-title{ margin-top:12px; font-size:20px; line-height:1.25; font-weight:600; letter-spacing:-.3px; color:var(--heading); text-wrap:balance; } .res-chips{ display:flex; flex-wrap:wrap; gap:6px; margin-top:12px; } .res-chips span{ font-size:12.5px; padding:4px 9px; background:var(--surface); border:1px solid var(--border-hairline); border-radius:var(--r-field); color:var(--body); } .res-chips:empty{ display:none; } .res-photo{ display:grid; grid-template-columns:88px 1fr; gap:12px; align-items:center; margin-top:14px; } .res-photo img{ width:88px; height:66px; object-fit:cover; border-radius:var(--r-field); } .res-photo p{ font-size:13.5px; line-height:1.4; color:var(--body); } .result p{ font-size:14.5px; line-height:1.5; color:var(--body); } .res-body{ margin-top:12px; } .res-list{ list-style:none; padding:0; margin-top:12px; display:grid; gap:8px; } .res-list li{ display:grid; grid-template-columns:10px 1fr; gap:10px; align-items:baseline; font-size:14px; line-height:1.45; color:var(--body); } .res-list li::before{ content:""; width:10px; height:8px; background:var(--phosphor); clip-path:polygon(0 0, 100% 60%, 40% 100%, 0 100%); } .res-foot{ margin-top:12px; font-size:13.5px; color:var(--muted); } .res-foot a{ color:var(--accent-text); } @media (max-width:999px){ .rail{ position:static; } .mini{ display:grid; gap:8px; margin-bottom:22px; } .mini .meter{ font-size:12.5px; } } /* ---------- 03 why - paper; the diagram kept; refusals as a note ---------- */ .why{ padding:72px 0 72px; border-top:1px solid var(--border-hairline); } .why-grid{ margin-top:34px; display:grid; gap:28px; } @media (min-width:1000px){ .why-grid{ grid-template-columns:minmax(0,1.55fr) minmax(300px,.85fr); gap:40px; align-items:start; } } .drawing-card{ position:relative; background:var(--surface-raised); border:1px solid var(--border-hairline); border-radius:var(--r); padding:18px 18px 16px; overflow:hidden; } .seg{ display:inline-flex; gap:0; padding:3px; background:var(--surface-sunken); border-radius:6px; } .seg button{ all:unset; cursor:pointer; padding:8px 14px; border-radius:4px; font-size:14px; font-weight:500; color:var(--body); display:inline-flex; align-items:center; gap:8px; transition:background-color .2s, color .2s; } .seg button i{ width:10px; height:8px; background:var(--sc); clip-path:polygon(0 0, 100% 60%, 40% 100%, 0 100%); } .seg button[aria-pressed="true"]{ background:var(--heading); color:var(--on-panel-heading); } .seg button:focus-visible{ outline:2px solid var(--focus-ring); outline-offset:2px; } .seg .s-cold{ --sc:var(--cond-deep); } .seg .s-rain{ --sc:var(--ingr-deep); } .drawing-head{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:10px 16px; } .drawing-head p{ font-size:14px; color:var(--muted); } .drawing{ width:100%; height:auto; margin-top:14px; display:block; font-family:var(--font); } .drawing-mobile{ display:none; } @media (max-width:719px){ .drawing-desktop{ display:none; } .drawing-mobile{ display:block; } .drawing-mobile .lbl, .drawing-mobile .mk{ font-size:13px; } } .drawing .cut{ fill:none; stroke:var(--heading); stroke-width:2.2; stroke-linejoin:round; } .drawing .lbl{ font-size:11px; letter-spacing:.1em; fill:var(--muted); font-weight:500; paint-order:stroke; stroke:var(--surface-raised); stroke-width:6px; stroke-linejoin:round; } /* technical annotation - phosphor on light */ .drawing .mk{ font-size:11px; letter-spacing:.06em; fill:var(--phosphor); font-weight:600; font-variant-numeric:tabular-nums; paint-order:stroke; stroke:var(--surface-raised); stroke-width:6px; stroke-linejoin:round; } .drawing .datum{ stroke:var(--border); stroke-width:1; stroke-dasharray:4 4; } .drawing .warm{ stroke:var(--ingr-deep); stroke-width:1.8; fill:none; stroke-linecap:round; } .drawing .bead{ fill:var(--cond-deep); } .drawing .rain{ stroke:var(--ingr-deep); stroke-width:1.8; stroke-linecap:round; } .drawing .stain{ fill:var(--ingr); } .drawing .run{ stroke:var(--ingr-deep); stroke-width:2.4; fill:none; stroke-linecap:round; } .drawing .drip{ fill:var(--cond-deep); } .drawing .drip-r{ fill:var(--ingr-deep); } .drawing .cold, .drawing .wet{ transition:opacity .45s var(--ease); } .drawing[data-state="cold"] .wet{ opacity:0; } .drawing[data-state="rain"] .cold{ opacity:0; } .drawing .bead{ transform-box:fill-box; transform-origin:center; transition:transform .5s var(--ease), opacity .4s; } .drawing[data-state="rain"] .bead{ transform:scale(0); } .drawing[data-state="cold"] .bead{ transform:scale(1); } .drawing .warm{ stroke-dasharray:90; stroke-dashoffset:0; transition:stroke-dashoffset .8s var(--ease); } .drawing[data-state="rain"] .warm{ stroke-dashoffset:90; } .drawing .run{ stroke-dasharray:220; stroke-dashoffset:0; transition:stroke-dashoffset .9s var(--ease) .1s; } .drawing[data-state="cold"] .run{ stroke-dashoffset:220; } .drawing .rain{ stroke-dasharray:14 10; } .drawing[data-state="rain"] .rain{ animation:rainfall 1.1s linear infinite; } @keyframes rainfall{ to{ stroke-dashoffset:-24; } } .drawing .drip, .drawing .drip-r{ animation:dripfall 2.6s var(--ease) infinite; } .drawing .drip.d2{ animation-delay:.9s; } .drawing .drip.d3{ animation-delay:1.7s; } .drawing[data-state="rain"] .drip{ animation:none; opacity:0; } .drawing[data-state="cold"] .drip-r{ animation:none; opacity:0; } @keyframes dripfall{ 0%{ transform:translateY(0); opacity:0;} 12%{ opacity:1;} 85%{ opacity:1;} 100%{ transform:translateY(150px); opacity:0;} } .fignote{ margin-top:10px; display:flex; flex-wrap:wrap; gap:6px 18px; font-size:12.5px; color:var(--muted); } /* the note - two refusals, designed as reassurance: a paper note with a turned corner, a sea-glass plane down its edge, statements in heading weight, nothing that reads as a warning */ .note{ position:relative; background:var(--surface-raised); border-radius:var(--r); padding:26px 26px 28px 30px; overflow:hidden; clip-path:polygon(0 0, calc(100% - var(--ch-x)) 0, 100% var(--ch-y), 100% 100%, 0 100%); } .note::after{ content:""; position:absolute; top:0; right:0; width:var(--ch-x); height:var(--ch-y); background:var(--surface-sunken); clip-path:polygon(0 0, 100% 100%, 0 100%); } .note::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:6px; background:var(--amb-sea-glass); } .note .kicker{ color:var(--verdict-verified); } .note-intro{ margin-top:10px; font-size:15px; color:var(--body); } .refusal{ margin-top:22px; padding-top:20px; border-top:1px solid var(--border-hairline); } .refusal .rk{ font-size:12px; letter-spacing:.1em; text-transform:uppercase; font-weight:600; color:var(--muted); } .refusal h3{ margin-top:8px; font-size:19px; line-height:1.3; font-weight:600; letter-spacing:-.3px; color:var(--heading); text-wrap:balance; } .refusal p{ margin-top:8px; font-size:14.5px; line-height:1.5; color:var(--body); } .note-sign{ margin-top:22px; font-size:13.5px; color:var(--muted); display:flex; align-items:center; gap:10px; } .note-sign::before{ content:""; width:12px; height:9px; background:var(--verdict-verified); clip-path:polygon(0 0, 100% 60%, 40% 100%, 0 100%); } /* ---------- 04 next - tiles on paper ---------- */ .next{ padding:72px 0 80px; border-top:1px solid var(--border-hairline); } .tiles{ margin-top:34px; display:grid; gap:12px; } @media (min-width:600px){ .tiles{ grid-template-columns:1fr 1fr; } } @media (min-width:1000px){ .tiles{ grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; } } .tile{ position:relative; display:flex; flex-direction:column; gap:12px; min-height:100%; padding:16px; background:var(--surface-raised); color:var(--heading); text-decoration:none; border-radius:var(--r); border:1.5px solid var(--border-hairline); overflow:hidden; transition:transform var(--dur) var(--ease), border-color var(--dur); } .tile::after{ content:""; position:absolute; top:0; right:0; width:var(--ch-x); height:var(--ch-y); background:var(--accent); clip-path:polygon(100% 0, 100% 100%, 0 0); transform:scale(0); transform-origin:100% 0; transition:transform .32s var(--ease); } .tile .opt-icon{ width:calc(100% + 32px); margin:0 -16px; } /* photograph tiles: the image with the HOLVEM label plate - the same tag + name construction as the section-01 comparison pair (kept from v1 at the Founder's request): tag on the violet anchor with paper text (7.28:1), name on paper with the 31 deg cut. The label never sits on the image itself, so AA holds over every photograph by construction. */ .tile-media{ position:relative; width:calc(100% + 32px); margin:-16px -16px 0; aspect-ratio:4/3; background:var(--surface-sunken); overflow:hidden; } .tile-media img{ width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease); } .tile-media .fig-label{ z-index:1; } .tile-media .fig-tag{ background:var(--amb-violet-anchor); color:var(--surface-raised); } .tile-media .fig-name{ font-size:14px; padding:8px 24px 8px 12px; } .tile:hover .tile-media img, .tile:focus-visible .tile-media img{ transform:scale(1.025); } .tile-photo .tile-t{ font-size:16px; } @media (prefers-reduced-motion: reduce){ .tile-media img{ transition:none; } } .tile-t{ display:block; font-size:17px; font-weight:600; letter-spacing:-.3px; line-height:1.25; color:var(--heading); } .tile-s{ display:block; margin-top:4px; font-size:14px; color:var(--body); line-height:1.45; } .tile-go{ margin-top:auto; display:inline-flex; align-items:center; gap:8px; font-size:14px; font-weight:600; color:var(--accent-text); } .tile-go svg{ width:16px; height:16px; transition:transform var(--dur) var(--ease); } .tile:hover, .tile:focus-visible{ transform:translateY(-4px); border-color:var(--accent); } .tile:hover::after, .tile:focus-visible::after{ transform:scale(1); } .tile:hover .tile-go svg, .tile:focus-visible .tile-go svg{ transform:translateX(4px); } .tile:hover .ico, .tile:focus-visible .ico{ transform:translateY(-3px); } .tile:hover .ico .field, .tile:focus-visible .ico .field{ opacity:1; } /* ---------- forward ---------- */ .forward{ padding:64px 0 72px; background:var(--surface-raised); border-top:1px solid var(--border-hairline); } .forward-grid{ display:grid; gap:36px; } @media (min-width:1000px){ .forward-grid{ grid-template-columns:minmax(0,1fr); gap:64px; } .fwd{ max-width:860px; } } .fwd h3, .stub h3{ margin-top:12px; font-size:24px; line-height:1.2; letter-spacing:-.4px; font-weight:600; color:var(--heading); } .fwd ol{ margin-top:18px; padding:0; list-style:none; counter-reset:f; display:grid; gap:10px; } .fwd li{ counter-increment:f; display:grid; grid-template-columns:22px 1fr; gap:10px; font-size:15.5px; line-height:1.5; color:var(--body); } .fwd li::before{ content:counter(f); font-size:12px; font-weight:600; color:var(--phosphor); font-variant-numeric:tabular-nums; padding-top:4px; } .fwd-foot{ margin-top:20px; display:flex; flex-wrap:wrap; justify-content:flex-start; align-items:center; gap:10px 16px; font-size:14px; color:var(--body); } .copybtn{ all:unset; cursor:pointer; display:inline-flex; align-items:center; gap:8px; padding:9px 14px; border:1.5px solid var(--heading); border-radius:var(--r); font-size:14px; font-weight:600; color:var(--heading); background:var(--surface-raised); transition:background-color .2s; } .copybtn svg{ width:14px; height:14px; } .copybtn:hover{ background:var(--surface); } .copybtn.is-done{ border-color:var(--verdict-verified); color:var(--verdict-verified); } .copybtn:focus-visible{ outline:2px solid var(--focus-ring); outline-offset:3px; } .stub{ padding:22px 24px; border:1px dashed var(--border); border-radius:var(--r); } .stub p{ margin-top:10px; font-size:14.5px; color:var(--body); } .flag{ display:inline-block; margin-top:14px; font-size:12px; font-weight:600; letter-spacing:.06em; color:var(--action); border:1px solid var(--action); padding:4px 8px; border-radius:var(--r-field); } /* ---------- decision - Route C light on the OPTION 2 values. DOSE 0.55 - measured on the rendered page under the actual text boxes (content hidden) at 390 / 640 / 768 / 1000 / 1109 / 1199 / 1260 / 1440 and at 1000-1080 in 4-20px steps: worst 16px --body 4.86:1 (the soft-violet plane's shaded ramp edge), worst --heading 9.39:1, worst heading-em facet #805CA5 3.06:1 (large text; 0.60 drops it to 2.92 and fails). The violet anchor is not under any text box at any of those widths; if it ever were, it would bind the dose at 0.40 (4.76:1 at 0.40, 4.33 at 0.45). --muted never sits on the plate (2.09 at this dose). ---------- */ .decision{ --amb-dose:.55; padding:84px 0 92px; background:var(--surface); border-top:1px solid var(--border-hairline); } .decision-grid{ display:grid; gap:28px; } @media (min-width:1000px){ .decision-grid{ grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:64px; align-items:start; } } .decision .kicker{ color:var(--body); } .decision .kicker b{ color:var(--heading); } .decision h2{ margin-top:14px; font-size:clamp(36px,4.8vw,58px); line-height:1.02; letter-spacing:-1.4px; font-weight:600; color:var(--heading); } /* the grading he liked: the plate INSIDE the letterforms at full dose, hard-edged. Built from the signature mark's own four facet values (#462F62 #6A3F96 #805CA5 #9678B2) because none of the four light Founder values clears 3:1 for large text on paper (1.78-2.02); the anchor does (6.84). */ .decision h2 em{ font-style:normal; background-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 420 84%22 preserveAspectRatio=%22xMidYMid slice%22%3E%3Cdefs%3E%3ClinearGradient id=%22gink-v40%22 gradientUnits=%22userSpaceOnUse%22 x1=%22-640.95%22 y1=%22-1158.03%22 x2=%2280.10%22 y2=%2242.00%22%3E%3Cstop offset=%220%22 stop-color=%22%23402B5A%22/%3E%3Cstop offset=%221%22 stop-color=%22%2355406F%22/%3E%3C/linearGradient%3E%3ClinearGradient id=%22gink-v41%22 gradientUnits=%22userSpaceOnUse%22 x1=%22190.31%22 y1=%22-24.22%22 x2=%22230.10%22 y2=%2242.00%22%3E%3Cstop offset=%220%22 stop-color=%22%23623A8A%22/%3E%3Cstop offset=%221%22 stop-color=%22%23764E9E%22/%3E%3C/linearGradient%3E%3ClinearGradient id=%22gink-v42%22 gradientUnits=%22userSpaceOnUse%22 x1=%22230.10%22 y1=%2242.00%22 x2=%22951.15%22 y2=%221242.03%22%3E%3Cstop offset=%220%22 stop-color=%22%238A69AC%22/%3E%3Cstop offset=%221%22 stop-color=%22%23765598%22/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpolygon points=%22-6000.000,0.000 150.000,0.000 10.201,84.000 -6139.799,84.000%22 fill=%22url%28%23gink-v40%29%22 shape-rendering=%22crispEdges%22/%3E%3Cpolygon points=%22150.000,0.000 300.000,0.000 160.201,84.000 10.201,84.000%22 fill=%22url%28%23gink-v41%29%22 shape-rendering=%22crispEdges%22/%3E%3Cpolygon points=%22300.000,0.000 9000.000,0.000 8860.201,84.000 160.201,84.000%22 fill=%22url%28%23gink-v42%29%22 shape-rendering=%22crispEdges%22/%3E%3C/svg%3E"); background-size:cover; background-position:center; -webkit-background-clip:text; background-clip:text; color:transparent; } .decision .lede{ color:var(--body); } .actions{ margin-top:24px; display:flex; flex-wrap:wrap; gap:12px; } .commit{ margin-top:22px; font-size:14px; line-height:1.5; color:var(--body); max-width:60ch; } .commit b{ color:var(--heading); } .nocap{ margin-top:18px; display:grid; grid-template-columns:20px 1fr; gap:10px; align-items:start; padding:16px 18px; background:var(--surface-raised); border-radius:var(--r); font-size:14.5px; color:var(--body); } .nocap svg{ width:20px; height:20px; } .nocap b{ color:var(--heading); } /* ---------- icons - the cut sample seen from beneath (icons_v4.py) ---------- */ .ico{ --ik-trough:#EAECEB; --ik-crest:#B9BFC2; --ik-webl:#DCE0E1; --ik-webr:#9CA3A7; --ik-cut:#14181B; --ik-edge:#8B8779; --ik-purlin-b:#E3E6E5; --ik-purlin-f:#8F969B; --ik-wall:#D4D2CB; --ik-wall-s:#B9B6AE; --ik-bead:var(--cond-deep); --ik-bead-hi:#DDF0F1; --ik-ingr:var(--ingr); --ik-ingr-deep:var(--ingr-deep); --ik-rain:var(--ingr-deep); --ik-mist:rgba(134,188,192,.34); --ik-field:var(--accent-soft); --ik-paper:var(--surface-raised); --ik-sun:#E9E4D6; --ik-sun-s:#CBC5B5; --ik-anno:var(--phosphor); } .ico .field{ opacity:0; transition:opacity .3s var(--ease); mix-blend-mode:multiply; } .ico .ik-mk{ font-family:var(--mono); font-size:5.2px; font-weight:600; letter-spacing:.04em; fill:var(--ik-anno); } .ico .ico-float{ animation:icoDrip 2.8s var(--ease) infinite; } .ico .ico-float-2{ animation-delay:1.3s; } .ico .ico-rain{ stroke-dasharray:3 4; animation:icoRain 1s linear infinite; } @keyframes icoDrip{ 0%{ transform:translateY(0); opacity:0;} 12%{ opacity:1;} 78%{ opacity:1;} 100%{ transform:translateY(14px); opacity:0;} } @keyframes icoRain{ to{ stroke-dashoffset:-14; } } @media (prefers-reduced-motion: reduce){ .ico .ico-float, .ico .ico-rain{ animation:none !important; } .ico .ico-float{ transform:translateY(5px); opacity:1; } } /* ---------- furniture: HOLVEM Furniture Bottom (site-wide), as home-v1 carries it ---------- */ footer{ padding:48px 0 40px; font-size:13px; color:var(--muted); border-top:1px solid var(--border-hairline); background:var(--surface); } footer .frame{ display:block; } footer a{ color:var(--muted); text-decoration:none; } footer a:hover{ color:var(--heading); text-decoration:underline; } .fgrid{ display:grid; gap:28px 24px; grid-template-columns:repeat(2,minmax(0,1fr)); } @media (min-width:720px){ .fgrid{ grid-template-columns:repeat(3,minmax(0,1fr)); } } @media (min-width:1000px){ .fgrid{ grid-template-columns:repeat(6,minmax(0,1fr)); } } .fgrid > div{ display:grid; gap:6px; align-content:start; } .fgrid a{ font-size:13px; line-height:1.4; } .fgrid .fhub{ font-weight:600; color:var(--heading); font-size:14px; margin-bottom:4px; } .futil{ margin-top:36px; padding-top:18px; border-top:1px solid var(--border-hairline); } footer p{ margin-top:12px; } @media (prefers-reduced-motion: reduce){ *,*::before,*::after{ animation:none !important; transition:none !important; scroll-behavior:auto !important; } .pair .fig{ opacity:1; transform:none; } .drawing .drip, .drawing .drip-r{ opacity:1; transform:translateY(60px); } .drawing[data-state="rain"] .drip, .drawing[data-state="cold"] .drip-r{ opacity:0; } } /* R1-SITE nav fix (23 Sep 2026): the settled IA made the desktop nav wrap to two lines. Single-line labels from 1320px (measured with Geist); the menu button carries the navigation up to 1319px (the band the capture already flagged as too tight). */ @media (min-width:1320px){ .masthead nav > a, .masthead .navitem > a{ white-space:nowrap; max-width:none; } .masthead nav{ gap:16px; font-size:13.5px; } .masthead .frame{ gap:12px; } } @media (min-width:1110px) and (max-width:1319px){ .masthead nav, .masthead .desktop-cta{ display:none !important; } .menu-button{ display:inline-flex !important; } .menu:not([hidden]){ display:block !important; } } /* ---------- R3 (28 Sep 2026): Building problems family additions. The hero is the furniture's .hero-holvem; label plates never clip; tiles carry their name below the image; readable rows; hub doors three across. ---------- */ .hero-holvem .crumbs{ margin-bottom:0; } .hero-holvem .crumbs a:hover{ color:var(--heading); } .hero-holvem .hh-proof{ margin-top:2px; } .hero-holvem .hh-actions .tlink{ font-size:15px; } .fig-label{ max-width:100%; } .fig-name{ white-space:normal; min-width:0; } .door-label{ max-width:100%; } .door-label b{ white-space:normal; min-width:0; } /* tiles (R3-S5): the tag stays on the photograph, the name is a heading beneath it, three across at most (R3-S2) */ .tiles{ --tn:3; } @media (min-width:1000px){ .tiles{ grid-template-columns:repeat(3,minmax(0,1fr)); } } .tile-t{ display:block; font-size:18px; line-height:1.3; font-weight:600; letter-spacing:-.2px; color:var(--heading); text-wrap:balance; } .tile-s{ font-size:15.5px; } .tile-media .fig-label{ bottom:auto; top:0; } .tile-media .fig-tag{ padding:8px 12px; font-size:11px; letter-spacing:.08em; clip-path:polygon(0 0, calc(100% - 11px) 0, 100% 100%, 0 100%); padding-right:22px; } /* rows: one idea per row, number, title, body (R3-S2) */ .rows{ list-style:none; margin:34px 0 0; padding:0; border-top:1px solid var(--border); } .row{ display:grid; gap:8px 28px; padding:26px 0 28px; border-bottom:1px solid var(--border-hairline); } @media (min-width:860px){ .row{ grid-template-columns:52px minmax(0,.85fr) minmax(0,1.5fr); align-items:start; } } .row-n{ font-size:12px; letter-spacing:.08em; font-weight:600; color:var(--phosphor); font-variant-numeric:tabular-nums; padding-top:7px; } .row h3{ font-size:21px; line-height:1.25; font-weight:600; letter-spacing:-.3px; color:var(--heading); text-wrap:balance; } .row p{ font-size:16px; line-height:1.55; color:var(--body); max-width:62ch; } .row p b{ color:var(--heading); } .row .tlink{ margin-top:12px; font-size:14.5px; } /* two plain statements on paper, under the rows */ .plain{ margin-top:28px; display:grid; gap:16px; } @media (min-width:860px){ .plain{ grid-template-columns:1fr 1fr; gap:24px; } } .plain > div{ position:relative; padding:22px 24px 24px 30px; background:var(--surface-raised); border:1px solid var(--border-hairline); border-radius:var(--r); overflow:hidden; } .plain > div::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:6px; background:var(--amb-sea-glass); } .plain .rk{ font-size:12px; letter-spacing:.1em; text-transform:uppercase; font-weight:600; color:var(--muted); } .plain h3{ margin-top:8px; font-size:19px; line-height:1.3; font-weight:600; letter-spacing:-.3px; color:var(--heading); text-wrap:balance; } .plain h3 + p{ margin-top:8px; font-size:15.5px; line-height:1.5; color:var(--body); max-width:52ch; } /* a single sheetcard on its own row keeps a reading measure */ .sheetcard.solo{ margin-top:24px; max-width:820px; } .sheetcard.solo p{ max-width:66ch; } /* hub: doors three across from 1000px (R3-S2: never more than three cards in a row) */ @media (min-width:1000px){ .doors.doors-3{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; } .doors.doors-3 .door-t{ font-size:22px; } } .doors.is-in .door:nth-child(5){ animation-delay:.24s; } .doors.is-in .door:nth-child(6){ animation-delay:.30s; } .door-5{ --dc:var(--amb-violet-anchor); } .door-6{ --dc:var(--amb-sea-glass); } /* touch widths (R3-S5): every control at least 44px tall */ @media (max-width:899px){ .seg button{ min-height:44px; } .rec-play{ width:44px; height:44px; } .reset{ display:inline-flex; align-items:center; min-height:44px; } .copybtn{ min-height:44px; } } /* ===================================================================================================== HOLVEM R3 FURNITURE (M5-R1, round R3, 28 Sep 2026) Masthead + mega menu + dropdowns, mobile menu, footer, the R3-S3 section-background system, the mineral edge band and the R3-S6 hero overlay component. HOW IT IS USED - apply.py inlines this file (plus grey-fix.css) into a page as