/* ============================================================================================ CUTAWAY — a near-black room, hairline frames with a corner cut out, one acid accent. Tokens, and the furniture. There is not one component rule in this file — no row, no card, no field, no chip. Those are `parts.css`, built once, shared by every theme, and a theme that restyles one is a theme with its own row. THE CUT IS NOT IN THIS FILE EITHER, and that is deliberate. A silhouette that reaches a card, a photograph, a product and a gallery tile is VOCABULARY, not a drawing — so it lives in parts.css behind `--c-cut` and the `frame: "cut"` TONE, inert for every theme that does not ask. This file says how big the bite is; theme.js asks for it. See `--c-cut-path` in parts.css. ========================================================================================== */ /** * THE SHEET LAYER IS PAINTED BY THE THEME TOO. * * `#design-sheets` is a SIBLING of the page, not a child, so a token block written for * `#clay-page` alone reaches nothing inside a sheet — every basket, product and sign-in would be * drawn in Clay's paint rather than the business's. Both hosts, on every rule that DECLARES a * token. There is a test. */ :is(#clay-page,#design-sheets).cutaway{ /* ── ink and ground ───────────────────────────────────────────────────────────────────── */ /* NOT #000. A pure black page makes every hairline on it look like a scratch, and this design is made of hairlines. One step up from black is a room; black is an absence. */ --c-paper:#0C0C0D; /* and not #FFF, for the same reason in the other direction — full white on near-black glares */ --c-ink:#F4F4F2; --c-accent:var(--accent,#D8F04A); /* A LITTLE BRAND IN THE GREYS. Enough that a business's colour reaches the lines and the secondary text; not enough to tint the room, which would make the accent land on a version of itself. Chunky is 11%, Quiet is 3%; this sits between them because the greys here are large areas and a tint at 11% over a whole near-black page reads as a colour cast. */ --c-brand:5%; /* ONE STEP UP, NEVER A DIFFERENT COLOUR. A `fill` band is the same room with the lights up a little. Two dark greys that are actually two hues is the fastest way to make a dark page look cheap. */ --c-fill:#16161A; --c-ground-fill:#131317; --c-card-bg:#131317; /* THE HAIRLINE IS THE DESIGN, so it is stated rather than derived: bright enough to survive a photograph next to it, dim enough that twelve frames on one screen are not twelve stripes. */ --c-line:#333338; --c-soft:#9A9AA2; --c-photo:#1A1A1F; /* THE ONE LIGHT BAND. `close` is the only band that flips, and this is what it flips to. */ --c-flip:#F4F4F2; --c-flip-ink:#0C0C0D; /* ── the frame ────────────────────────────────────────────────────────────────────────── */ /* SOFT, EVERYWHERE. This is the correction the first pass got backwards: the default frame is a large rounded rectangle and NOTHING is cut. A notch is a join between two surfaces, drawn by the drawing that needs it, and there are four or five on a whole page. */ --c-r:18px; --c-r-lg:28px; --c-r-xl:36px; --c-r-pill:999px; --c-bw:1px; --c-card-bw:1px; --c-card-pad:22px; /* NOTHING FLOATS. A shadow is depth, and this page is flat by construction — the frame says where a thing is, and a thing that also has a shadow is being told twice. */ --c-card-shadow:none; --c-act-shadow:none; --c-lift:none; --c-quote-bg:#131317; --c-quote-bw:1px; --c-field-bg:#131317; --c-field-bw:1px; --c-field-bw-b:1px; /* the band's own rule under a heading — this design draws one, and it runs the column's width */ --c-band-rule:1px; /* ── type ─────────────────────────────────────────────────────────────────────────────── */ /* ONE FAMILY. A technical page that mixes faces is a page with two opinions; the hierarchy here is size and colour, and the frames do the rest. */ /* MONA SANS, and the reason is the WIDTH AXIS. It is variable 200-900 and 75-125% wide, so the headline can be set wide and the small labels narrow and it is still one family: the hierarchy comes from width and size rather than from a second face. Inter is what Bold and Quiet already use, and reaching for it again is most of why the first pass at this theme looked like Bold. */ --c-display:"Mona Sans",system-ui,-apple-system,sans-serif; --c-body:"Mona Sans",system-ui,-apple-system,sans-serif; /* THE FIGURES ARE MONOSPACED, and only the figures — a running number in a slot, a count, a price. Tabular is what makes a technical page read as measured; it is not a body face. */ --c-label:"JetBrains Mono",ui-monospace,Menlo,monospace; --c-display-adj:1; --c-base:16px; /* THE STEP BETWEEN SIZES, and it is the only place the scale is set from. `--c-t6` is NOT overridden here. The size tests read a theme's `--c-base` and `--c-ratio` and rebuild the chain from parts.css, so a theme that hard-sets a step is measured on one scale and drawn on another — the test passes on a page nobody sees. 1.32 rather than 1.28 because the phone floor is `base * ratio^4` and the desk ceiling is a fixed `6cqw`: at 1.28 the headline went 43px to 84px, which is twice, and a heading may only double-and-a-bit. */ --c-ratio:1.32; --c-weight:600; --c-case:none; /* HEADINGS PULL IN. At display sizes Inter's default fit is loose, and a tight line is what makes type read as engineered rather than as typed. */ --c-track:-.022em; --c-lead-h:1.06; --c-body-h:1.55; /* the small labels — the number in the cut, the eyebrow, a caption */ --c-label-case:uppercase; --c-label-track:.1em; --c-label-weight:600; /* ── the one thing to press ───────────────────────────────────────────────────────────── */ /* THE ACCENT IS THE BUTTON, and dark type on it. An acid colour is only acid next to something that is not, so it appears once per screen and never as a surface. */ --c-act-bg:var(--c-accent); --c-act-font:var(--c-body); --c-act-weight:650; --c-act-case:none; --c-band-accent:var(--c-accent); /* ── rhythm ───────────────────────────────────────────────────────────────────────────── */ --c-u:8px; --c-density:1; --c-gap:18px; --c-gut:24px; --c-rhythm:64px; --c-measure:66ch; --c-bar:64px; --c-scrim-a:.72; --c-scrim-b:.28; } /** * THE TWO ROOMS. * * The block above IS the dark one — this design's default and the one it was drawn for. What is * below is the same design with the lights on: the same cut, the same hairline, the same acid, and * every value swapped for its opposite number rather than for a different idea. A light variant * that changes the radius or the accent is a second theme wearing this one's name. * * `[data-mode="dark"]` is stated as well as inherited, because the attribute is what an owner's * choice sets and a rule that is only ever a default cannot be turned back ON after a light one * has won. */ :is(#clay-page,#design-sheets).cutaway[data-mode="dark"]{ --c-paper:#0C0C0D; --c-ink:#F4F4F2; --c-fill:#16161A; --c-ground-fill:#131317; --c-card-bg:#131317; --c-quote-bg:#131317; --c-field-bg:#131317; --c-line:#333338; --c-soft:#9A9AA2; --c-photo:#1A1A1F; --c-flip:#F4F4F2; --c-flip-ink:#0C0C0D; } :is(#clay-page,#design-sheets).cutaway[data-mode="light"]{ /* off-white, not white: a hairline on pure white is a scratch there too */ --c-paper:#F4F4F2; --c-ink:#111113; --c-fill:#E9E9E5; --c-ground-fill:#ECECE8; --c-card-bg:#FFFFFF; --c-quote-bg:#FFFFFF; --c-field-bg:#FFFFFF; --c-line:#CFCFC9; --c-soft:#67676E; --c-photo:#E4E4DE; --c-flip:#111113; --c-flip-ink:#F4F4F2; } /** * THE GRAIN. * * A large near-black area on a modern screen bands: the gradient between two dark values has * nowhere to go and comes out as visible steps. A fine noise breaks the band up, and it is also * most of why a dark page reads as a MATERIAL rather than as an absence of light. * * On the page element rather than the body, so the editor's own chrome around it is untouched, and * behind everything with a negative z-index so nothing has to know it is there. */ /* THE PAGE IS THE CONTAINER. Every `@container page` rule in parts.css measures against this; without it the phone rules match nothing on a real site and the design is desktop-only. */ #clay-page.cutaway{container-type:inline-size;container-name:page;position:relative;isolation:isolate} #clay-page.cutaway::before{ content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.5; background-image:radial-gradient(#FFFFFF08 1px, transparent 1px); background-size:3px 3px} @media (prefers-reduced-motion: reduce){ #clay-page.cutaway::before{opacity:.32} } /* ============================================================================================ THE FURNITURE — the bar and the foot. What goes IN them is the runtime's; where it sits is the library's drawing; this file states a taste and paints. ========================================================================================== */ /** * THE BAR IS A LINE, NOT A SLAB. * * A dark page with a dark bar on it needs the bar to be told apart from the room without becoming * an object: the ground stays the paper, and a single hairline under it is the whole treatment. */ #clay-page.cutaway .l-nav{ background:color-mix(in oklab, var(--c-paper) 88%, transparent); -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px); border-bottom:1px solid var(--c-line)} #clay-page.cutaway .l-nav-in{min-height:var(--c-bar)} /* THE MARK IS THE ONE PIECE OF TYPE THAT IS NOT TRACKED IN — a name is a name, not a heading. */ #clay-page.cutaway .l-nav .l-mark{font-size:var(--c-t2);letter-spacing:0} /* …AND THE LINKS ARE IN PILLS, which `navItems: "tag"` in the tone already asks parts.css for. All this says is that the pill is a hairline rather than a fill: an outlined control on a dark page is a control; a filled one is a button, and none of these are. */ #clay-page.cutaway .l-nav-l a{font-weight:500;color:var(--c-soft);border-color:var(--c-line)} #clay-page.cutaway .l-nav-l a:hover{color:var(--c-ink);border-color:var(--c-ink);background:none} /* the basket and the menu are glyphs at the size of the type beside them */ #clay-page.cutaway .l-cart, #clay-page.cutaway .l-burger{border:1px solid var(--c-line);color:var(--c-ink);background:none} #clay-page.cutaway .l-cart:hover, #clay-page.cutaway .l-burger:hover{border-color:var(--c-ink)} /** * THE FOOT IS THE SAME ROOM, one step down. * * Not a black slab under a black page — there is nothing to contrast with. A hairline across the * top and the type at the secondary step is enough, and it keeps the one inverted band on the page * (the close) as the only thing that flips. */ #clay-page.cutaway .l-foot{ background:var(--c-paper);border-top:1px solid var(--c-line);color:var(--c-soft)} #clay-page.cutaway .l-foot a{color:var(--c-soft)} #clay-page.cutaway .l-foot a:hover{color:var(--c-ink)} #clay-page.cutaway .l-social a{border:1px solid var(--c-line);background:none;color:var(--c-ink)} #clay-page.cutaway .l-social a:hover{border-color:var(--c-ink)} /** * A HEADING, AND A RULE UNDER IT THAT RUNS THE COLUMN. * * The signature this design has that the token vocabulary has no word for: the band's heading sits * at the left edge and a hairline runs from it to the far side of the column, so every band opens * on the same line. `--c-band-rule` is the token that turns it on; this says what it looks like. */ /* NO `:is(a,b)` HERE. The contract test reads this file a SELECTOR at a time, splitting on the comma, so a comma inside `:is()` hands it a fragment with no scope on it and it reports the rule as aimed at the whole document. Two lines, each carrying `#clay-page`. */ #clay-page.cutaway .c-band > .c-in > * > .c-head{ padding-bottom:calc(var(--c-u)*2);border-bottom:1px solid var(--c-line)} #clay-page.cutaway .c-band > .c-in-wide > * > .c-head{ padding-bottom:calc(var(--c-u)*2);border-bottom:1px solid var(--c-line)} /** * THE LIGHT BAND, INVERTED PROPERLY. * * One band on the page flips, and on it the accent would be acid on near-white — which is the one * pairing this colour cannot do. So the button on the inverted ground is the ground's own ink, * derived from `--c-flip-ink` rather than from the page's paper. See the contract test that says * so in those words. */ :is(#clay-page,#design-sheets).cutaway .c-g-ink{ --c-act-bg:var(--c-flip-ink);--c-act-ink:var(--c-flip)} /* ============================================================================================ THIS THEME'S OWN DRAWINGS — the header, for now. See shapes.js next to this file. These are `l-cw-*` classes that only this theme emits and only this theme styles, so nothing here can reach another design. The shared components in parts.css stay the FLOOR: what this theme does not draw itself falls through to them. ========================================================================================== */ /** * THE HEADER IS ONE OBJECT — a dark strip with the bar in it, and a light stage tucked under. * * The strip runs the width of the band. At each END it reaches down past its own line, and the * stage's top corners curve UP into those two deeper blocks, so the dark appears to fold over the * light rather than to sit beside it. * * The first version drew the two ends and no strip, and they read as tabs stuck on a card: a fold * needs something to fold INTO. The bar between them is what makes the dark a strip. */ #clay-page.cutaway .l-cw-head > .c-in-wide{padding-block:0} #clay-page.cutaway .l-cw-head{padding-bottom:0} #clay-page.cutaway .l-cw-frame{position:relative} /** * THE BAR, INSIDE THE FRAME. * * The markup is the shared `nav/bar` — every hook intact — and this says where it sits and takes * off the two things it does as page furniture: it is not sticky here, because it is part of an * object rather than a strip that follows you, and it has no rule under it, because the stage's * edge is the line. */ #clay-page.cutaway .l-cw-bar .l-nav{position:static;background:none;border-bottom:0; backdrop-filter:none;-webkit-backdrop-filter:none} /* BLOCK, NOT FLEX. As a flex row the nav inside became a shrink-to-fit item, so `.l-nav-in` at 100% was 100% of its CONTENT — the bar's end cluster sat in the middle of the strip and the auto margin that pushes it right had no space to consume. */ #clay-page.cutaway .l-cw-bar{min-height:calc(var(--c-u)*9);display:block} /* NO INNER PADDING ON THE BAR — the two END BLOCKS carry it instead. With it here the dark blocks started 16px in from the stage's edges, so each one read as a tab floating with light on both sides rather than as the room folding over a corner. A block that folds has to reach the edge. */ #clay-page.cutaway .l-cw-bar .l-nav-in{width:100%;margin:0;padding-inline:0; min-height:calc(var(--c-u)*9)} /* the bar's own links, on the room: outlined pills, secondary until you point at one */ #clay-page.cutaway .l-cw-bar .l-nav-l a{color:var(--c-soft);border-color:var(--c-line)} #clay-page.cutaway .l-cw-bar .l-nav-l a:hover{color:var(--c-ink);border-color:var(--c-ink)} /** * THE STAGE — the light object standing in the dark room. * * The ink tokens are re-declared for the inside of the panel rather than the colours being written * on each element: the heading, the line, the rule and the disc all read them from parts.css * already, so one block flips the whole panel and nothing inside needs to know it is on light. * * The panel is the OPPOSITE surface, and that is what makes the fold visible at all. An earlier * version made it one step up from the room — four values apart — and the interlock disappeared. */ :is(#clay-page,#design-sheets).cutaway .l-cw-stage{ --g:var(--c-flip); --c-ink:var(--c-flip-ink); --c-soft:color-mix(in oklab, var(--c-flip-ink) 62%, var(--c-flip)); --c-line:color-mix(in oklab, var(--c-flip-ink) 16%, var(--c-flip)); color:var(--c-flip-ink)} /* THE TOP CORNERS ARE SQUARE, because the FOLD is what turns them. A rounded corner under a bar end gives the eye two curves a few pixels apart and reads as a tab stuck on rather than as one surface tucked under another. The bottom two stay round — nothing folds there. */ #clay-page.cutaway .l-cw-stage{ position:relative;background:var(--g); border-radius:0 0 var(--c-r-xl) var(--c-r-xl); padding:calc(var(--c-u)*7) calc(var(--c-u)*6) calc(var(--c-u)*6)} /** * THE STRIP SITS ON THE STAGE, AND THE FOLD IS NOT DRAWN YET. * * What is here is right: a dark strip carrying the bar, and the light stage directly under it with * its top corners square, so the two read as one object rather than as a bar floating above a band. * * WHAT IS NOT HERE is the interlock — the room folding over the stage's top corners around the * mark and the controls. Two attempts are recorded in the history because both failed in ways * worth remembering: a radial-gradient fillet came out as a small dark TOOTH hanging into the * light at these sizes, and rounding the ends' own bottom corners never showed at all, because * `.l-mark` stretches to the nav ROW and not to any wrapper above it, so the ends never reach past * the strip's line without fighting the shared bar's box model from outside. * * It is left undrawn rather than left half-drawn. A curve that has to be explained is not working, * and a header that is clean and plain is worth more than one with a shape in it that reads as a * rendering fault. See BRIEF.md — this is the first thing to pick up. */ #clay-page.cutaway .l-cw-bar{position:relative;z-index:2} /* the words and the picture inside the panel, side by side */ #clay-page.cutaway .l-cw-body{ display:grid;grid-template-columns:5fr 6fr;gap:calc(var(--c-u)*6);align-items:center} #clay-page.cutaway .l-cw-words{display:flex;flex-direction:column;align-items:flex-start; gap:calc(var(--c-u)*3)} /* THE HEADLINE IS SET WIDE. This is Mona Sans's width axis earning its place: the name of the business is the one piece of type on the site allowed to take up room. */ #clay-page.cutaway .l-cw-t{margin:0;font-stretch:112%;font-weight:600;line-height:1.02} #clay-page.cutaway .l-cw-l{margin:0;color:var(--c-soft);max-width:44ch} #clay-page.cutaway .l-cw-foot{display:flex;align-items:center;gap:calc(var(--c-u)*4);flex-wrap:wrap; padding-block-start:calc(var(--c-u)*2);border-top:1px solid var(--c-line);align-self:stretch} #clay-page.cutaway .l-cw-pic .c-media{border-radius:var(--c-r-lg);overflow:hidden} /** * THE WAY IN — a disc with an arrow, and the words beside it. * * Not a slab of colour. This page spends its accent once, and a link is not what it spends it on: * the disc is ink, the words are ink, and what changes under a finger is that the disc fills with * the accent and steps forward. 1px, 160ms — the whole motion budget on this design. */ #clay-page.cutaway :is(.l-cw-go,.l-cw-pill){ display:inline-flex;align-items:center;gap:calc(var(--c-u)*1.5); color:var(--c-ink);text-decoration:none;font:600 var(--c-t1)/1 var(--c-body); transition:color .16s ease} #clay-page.cutaway .l-cw-pill{ border:1px solid var(--c-line);border-radius:var(--c-r-pill); padding:calc(var(--c-u)*1.25) calc(var(--c-u)*2.5) calc(var(--c-u)*1.25) calc(var(--c-u)*1.25); transition:border-color .16s ease,color .16s ease} /* THE DISC TAKES ITS COLOURS FROM WHATEVER IT IS STANDING ON — `--g` is that surface, and both a band and the stage set it, so this is right in either without asking which. */ #clay-page.cutaway .l-cw-disc{ width:26px;height:26px;flex:0 0 auto;border-radius:999px;display:grid;place-items:center; background:var(--c-ink);color:var(--g,var(--c-paper)); transition:background .16s ease,color .16s ease,transform .16s ease} #clay-page.cutaway .l-cw-disc svg{width:13px;height:13px} #clay-page.cutaway :is(.l-cw-go,.l-cw-pill):hover .l-cw-disc{ background:var(--c-accent);color:var(--c-flip-ink);transform:translateX(1px)} #clay-page.cutaway .l-cw-pill:hover{border-color:var(--c-ink)} #clay-page.cutaway :is(.l-cw-go,.l-cw-pill):focus-visible{outline:2px solid var(--c-accent); outline-offset:3px;border-radius:var(--c-r-pill)} @media (prefers-reduced-motion: reduce){ #clay-page.cutaway :is(.l-cw-go,.l-cw-pill):hover .l-cw-disc{transform:none} } /* the rating beside the way in — the figures are the mono face, which is what it is there for */ #clay-page.cutaway .l-cw-proof{margin:0;display:flex;align-items:baseline;gap:calc(var(--c-u)*1); color:var(--c-soft);font:var(--c-t1)/1 var(--c-body)} #clay-page.cutaway .l-cw-proof b{font-family:var(--c-label);font-weight:600;color:var(--c-ink); font-variant-numeric:tabular-nums} /** * THE PHONE IS A DIFFERENT DRAWING, NOT A NARROWER ONE. * * Two slots cannot both sit on a 390px edge — a label and a control side by side leave the stage * no top at all. So the RIGHT one goes: the action is already the last thing in the words, and a * control repeated twice on a screen this size is a control in the way. The left slot stays, * because the place a business is IS the first thing worth saying. */ @container page (max-width:760px){ #clay-page.cutaway .l-cw-body{grid-template-columns:1fr;gap:calc(var(--c-u)*4)} #clay-page.cutaway .l-cw-slot-b{display:none} #clay-page.cutaway .l-cw-stage{padding:calc(var(--c-u)*6) calc(var(--c-u)*3) calc(var(--c-u)*4); border-radius:var(--c-r-lg)} :is(#clay-page,#design-sheets).cutaway .l-cw-slot{--R:var(--c-r)} } /* ============================================================================================ WHAT WE DO — a row of numbered ways in, and the first one solid. ========================================================================================== */ /** * A BAND OPENS ON A LINE. * * Eyebrow, heading, description, and a hairline running from the left edge to the far side of the * column. Every band starts on the same line, which is what makes a page of them read as one * document rather than as a stack of unrelated blocks. */ #clay-page.cutaway .l-cw-head-w{padding-bottom:calc(var(--c-u)*3); border-bottom:1px solid var(--c-line);margin-bottom:calc(var(--c-u)*5)} /** * THE ROW REMEMBERS THE BAND IT IS ON. * * The running number sits OUTSIDE its card, on the band, so it is painted in the band's own ground * — and `--g` inside a card is the CARD's ground, because that is what a card is for. The accent * card redefines `--g` and `--c-soft` for everything inside it, so its number came out as an acid * tab stuck to the corner in the wrong colour, hanging above the card's own top edge. * * So the row copies the band's ground and its soft ink into names no card overrides, and the * numbers read from those. Two declarations, and the accent card can say what it likes about * itself. */ #clay-page.cutaway .l-cwd-row{ display:grid;gap:calc(var(--c-u)*3); grid-template-columns:repeat(var(--n,3), minmax(0,1fr)); /* the number seats ABOVE each card, so the row needs that much air over it */ margin-top:calc(var(--c-u)*5)} :is(#clay-page,#design-sheets).cutaway .l-cwd-row, :is(#clay-page,#design-sheets).cutaway .l-cwr-row{ --bandg:var(--g,var(--c-paper));--bandsoft:var(--c-soft)} /** * A CARD IS A DOOR, NOT AN ARTICLE. * * The dialled band puts a photograph across the top, a title, a sentence and a button — which * reads as something to read. A way in is one of three or four doors: the TITLE is the biggest * thing on it, the picture is a small square in the corner, and the way in is a disc and a word. */ #clay-page.cutaway .l-cwd-card{ position:relative;display:flex;flex-direction:column;align-items:flex-start; gap:calc(var(--c-u)*1.5); padding:calc(var(--c-u)*4) calc(var(--c-u)*3) calc(var(--c-u)*3); background:var(--c-card-bg);border:1px solid var(--c-line);border-radius:var(--c-r-lg); color:var(--c-ink);text-decoration:none; transition:border-color .16s ease,background .16s ease,transform .16s ease} #clay-page.cutaway .l-cwd-card:hover{border-color:var(--c-ink);transform:translateY(-1px)} #clay-page.cutaway .l-cwd-card:focus-visible{outline:2px solid var(--c-accent);outline-offset:3px} /** * THE FIRST ONE IS SOLID, and it is the only surface on the page that is the accent. * * `compose` hands these over in the owner's own rank, so the first card IS the site's main way in. * One filled card among outlined ones says which door matters without a word. Its ink is stated * rather than derived: an acid this light takes near-black, and nothing else on this page does. */ :is(#clay-page,#design-sheets).cutaway .l-cwd-on{ --g:var(--c-accent); --c-ink:#0C0C0D; --c-soft:color-mix(in oklab, var(--c-flip-ink) 66%, var(--c-accent)); --c-line:color-mix(in oklab, var(--c-flip-ink) 22%, var(--c-accent))} #clay-page.cutaway .l-cwd-on{background:var(--c-accent);border-color:transparent; color:var(--c-flip-ink)} #clay-page.cutaway .l-cwd-on:hover{border-color:transparent; background:color-mix(in oklab, var(--c-accent) 88%, var(--c-flip))} /** * THE RUNNING NUMBER, SEATED IN THE CARD'S CORNER. * * The same interlock as the header: a block of the BAND's ground sitting on the card's top edge, * with a fillet turning the corner into it. It is the only ornament on the card and it is not an * ornament — it is what tells you there are three of these and this is the first. * * The ground is `--g` from the BAND, not from the card, because the number sits on the band. */ :is(#clay-page,#design-sheets).cutaway .l-cwd-n{--R:var(--c-r)} #clay-page.cutaway .l-cwd-n{ position:absolute;bottom:100%;left:0;z-index:2; padding:0 calc(var(--c-u)*2) calc(var(--c-u)*1.5) 0; background:var(--bandg,var(--c-paper));border-radius:0 var(--R) 0 0; font:600 var(--c-t1)/1 var(--c-label);font-variant-numeric:tabular-nums; letter-spacing:.06em;color:var(--bandsoft,var(--c-soft))} #clay-page.cutaway .l-cwd-n i{font-style:normal;opacity:.5;margin-inline-end:.35em} #clay-page.cutaway .l-cwd-n::after{ content:"";position:absolute;top:100%;left:0;width:var(--R);height:var(--R);pointer-events:none; background:radial-gradient(circle at 100% 100%, transparent var(--R), var(--bandg,var(--c-paper)) calc(var(--R) + .5px))} #clay-page.cutaway .l-cwd-pic .c-media{width:calc(var(--c-u)*11);border-radius:var(--c-r); overflow:hidden;margin-bottom:calc(var(--c-u)*1)} #clay-page.cutaway .l-cwd-t{font:600 var(--c-t3)/1.1 var(--c-display);font-stretch:104%; letter-spacing:var(--c-track)} #clay-page.cutaway .l-cwd-s{color:var(--c-soft);font:var(--c-t1)/1.5 var(--c-body); margin-bottom:calc(var(--c-u)*1)} #clay-page.cutaway .l-cwd-go{display:inline-flex;align-items:center;gap:calc(var(--c-u)*1.5); margin-top:auto;font:600 var(--c-t1)/1 var(--c-body)} #clay-page.cutaway .l-cwd-card:hover .l-cw-disc{background:var(--c-accent); color:var(--c-flip-ink);transform:translateX(1px)} /* on the solid card the disc inverts — ink on acid, so it is still the darkest thing on it */ #clay-page.cutaway .l-cwd-on .l-cw-disc{background:var(--c-flip-ink);color:var(--c-accent)} #clay-page.cutaway .l-cwd-on:hover .l-cw-disc{background:var(--c-flip-ink);color:var(--c-accent)} /** * ON A PHONE THEY ARE A COLUMN, NOT A RAIL. * * Three doors are a decision, and a decision you have to swipe to see the rest of is a decision * made for you. A rail is right for a taste — a gallery, a shelf of products — and wrong here. */ @container page (max-width:760px){ #clay-page.cutaway .l-cwd-row{grid-template-columns:1fr;gap:calc(var(--c-u)*5)} #clay-page.cutaway .l-cwd-t{font-size:var(--c-t2)} } /* ============================================================================================ THE REST OF THE BANDS. ========================================================================================== */ /** * REVIEWS — the score set as a measurement, the quotations as outlined cards. * * The mono face exists for this: a rating is a figure, so it is set as one, large, with its count * and its source underneath. Beside the words rather than under them, because it is evidence for * the heading and not an afterthought to it. */ #clay-page.cutaway .l-cwr-top{display:flex;align-items:flex-end;justify-content:space-between; gap:calc(var(--c-u)*4);flex-wrap:wrap;margin-bottom:calc(var(--c-u)*5)} #clay-page.cutaway .l-cwr-score{display:flex;align-items:baseline;gap:calc(var(--c-u)*1.5)} #clay-page.cutaway .l-cwr-score b{font:600 var(--c-t4)/1 var(--c-label); font-variant-numeric:tabular-nums;letter-spacing:-.02em} #clay-page.cutaway .l-cwr-score span, #clay-page.cutaway .l-cwr-score em{font-style:normal;color:var(--c-soft); font:var(--c-t1)/1 var(--c-body)} /* the same two names as the doors — the running numbers sit on the band, not on the cards */ #clay-page.cutaway .l-cwr-row{display:grid;gap:calc(var(--c-u)*3); grid-template-columns:repeat(var(--n,3), minmax(0,1fr));margin-top:calc(var(--c-u)*5)} #clay-page.cutaway .l-cwr-q{position:relative;margin:0;display:flex;flex-direction:column; gap:calc(var(--c-u)*2);padding:calc(var(--c-u)*4) calc(var(--c-u)*3) calc(var(--c-u)*3); background:var(--c-card-bg);border:1px solid var(--c-line);border-radius:var(--c-r-lg)} #clay-page.cutaway .l-cwr-q blockquote{margin:0;font:var(--c-t2)/1.5 var(--c-body); color:var(--c-ink)} #clay-page.cutaway .l-cwr-q figcaption{display:flex;flex-direction:column;gap:2px;margin-top:auto} #clay-page.cutaway .l-cwr-q figcaption b{font:600 var(--c-t1)/1.2 var(--c-body)} #clay-page.cutaway .l-cwr-q figcaption span{color:var(--c-soft);font:var(--c-t0)/1.2 var(--c-label); letter-spacing:.06em} /** * THE TOP OF AN INNER PAGE — the words, a rule, and the picture lying down under them. * * The title takes the room's full width and the photograph is a letterbox beneath it, which is the * one place `--c-crop-wide` is used. The shared page top centres its two halves against each other * and that left a title floating in the middle of nothing on this design. */ #clay-page.cutaway .l-cwp-w{display:flex;flex-direction:column;align-items:flex-start; gap:calc(var(--c-u)*2);padding-bottom:calc(var(--c-u)*3); border-bottom:1px solid var(--c-line)} #clay-page.cutaway .l-cwp-t{margin:0} #clay-page.cutaway .l-cwp-l{margin:0;max-width:var(--c-measure)} #clay-page.cutaway .l-cwp-w .l-cw-go{margin-top:calc(var(--c-u)*2)} #clay-page.cutaway .l-cwp-pic .c-media{border-radius:var(--c-r-xl);overflow:hidden} /** * ABOUT — the one paragraph on the site, given the room a paragraph needs. * * Everywhere else this design is short. Here the writing is the point, so it takes the measure and * the figures go under it as a mono strip rather than competing beside it. */ /* the two columns are the same height and the words hang off both ends of it — the paragraph at the top, the figures and the way in on the picture's own bottom edge. Left to themselves they bunched at the top and left a third of the band empty under them. */ #clay-page.cutaway .l-cwa-body{display:grid;grid-template-columns:6fr 5fr; gap:calc(var(--c-u)*6);align-items:stretch} #clay-page.cutaway .l-cwa-words{display:flex;flex-direction:column;align-items:flex-start; justify-content:space-between;gap:calc(var(--c-u)*4)} #clay-page.cutaway .l-cwa-pic{align-self:start} #clay-page.cutaway .l-cwa-p{margin:0;max-width:var(--c-measure); font:var(--c-t2)/1.65 var(--c-body);color:var(--c-ink)} #clay-page.cutaway .l-cwa-facts{display:flex;gap:calc(var(--c-u)*5);flex-wrap:wrap; padding-top:calc(var(--c-u)*3);border-top:1px solid var(--c-line);align-self:stretch} #clay-page.cutaway .l-cwa-fact{display:flex;flex-direction:column;gap:4px} #clay-page.cutaway .l-cwa-fact b{font:600 var(--c-t3)/1 var(--c-label); font-variant-numeric:tabular-nums;letter-spacing:-.02em} #clay-page.cutaway .l-cwa-fact span{color:var(--c-soft);font:var(--c-t0)/1 var(--c-label); letter-spacing:.1em;text-transform:uppercase} #clay-page.cutaway .l-cwa-pic .c-media{border-radius:var(--c-r-lg);overflow:hidden} /** * GETTING HOLD OF THEM — the form on one side, the telephone on the other. * * The inputs are the shared `c-field` markup so the machinery is the machinery; what this states * is the SILHOUETTE — a hairline box with a generous radius, the label above it in the mono face, * and the accent spent once, on Send. */ :is(#clay-page,#design-sheets).cutaway .l-cwf > .c-in{--c-split:7fr 5fr;--c-align:start} #clay-page.cutaway .l-cwf-set{display:grid;grid-template-columns:repeat(2, minmax(0,1fr)); gap:calc(var(--c-u)*3)} #clay-page.cutaway .l-cwf-form .c-field{display:flex;flex-direction:column; gap:calc(var(--c-u)*1);min-width:0} #clay-page.cutaway .l-cwf-form .c-wide{grid-column:1 / -1} #clay-page.cutaway .l-cwf-form .c-lab{color:var(--c-soft);font:var(--c-t0)/1 var(--c-label); letter-spacing:.1em;text-transform:uppercase} #clay-page.cutaway .l-cwf-form input, #clay-page.cutaway .l-cwf-form select, #clay-page.cutaway .l-cwf-form textarea{ width:100%;padding:calc(var(--c-u)*1.75) calc(var(--c-u)*2); background:var(--c-card-bg);border:1px solid var(--c-line);border-radius:var(--c-r); color:var(--c-ink);font:var(--c-t1)/1.4 var(--c-body)} #clay-page.cutaway .l-cwf-form textarea{min-height:calc(var(--c-u)*16);resize:vertical} #clay-page.cutaway .l-cwf-form input:focus, #clay-page.cutaway .l-cwf-form select:focus, #clay-page.cutaway .l-cwf-form textarea:focus{outline:0;border-color:var(--c-accent)} #clay-page.cutaway .l-cwf-form .c-note{color:var(--c-soft);font:var(--c-t0)/1.4 var(--c-body)} #clay-page.cutaway .l-cwf-go{display:flex;align-items:center;gap:calc(var(--c-u)*2.5); flex-wrap:wrap;margin-top:calc(var(--c-u)*4)} #clay-page.cutaway .l-cwf-send{appearance:none;cursor:pointer;border:0;border-radius:999px; padding:calc(var(--c-u)*1.75) calc(var(--c-u)*4);background:var(--c-accent); color:var(--c-flip-ink);font:600 var(--c-t1)/1 var(--c-body);transition:opacity .16s ease} #clay-page.cutaway .l-cwf-send:hover{opacity:.86} #clay-page.cutaway .l-cwf-send:focus-visible{outline:2px solid var(--c-accent);outline-offset:3px} #clay-page.cutaway .l-cwf-note, #clay-page.cutaway .l-cwf-said{margin:0;color:var(--c-soft);font:var(--c-t0)/1.5 var(--c-body)} #clay-page.cutaway .l-cwf-said{margin-top:calc(var(--c-u)*2)} /* the ways that are not a form — one row each, the disc doing the same job it does everywhere */ #clay-page.cutaway .l-cwf-ways{list-style:none;margin:0;padding:0; border-top:1px solid var(--c-line)} #clay-page.cutaway .l-cwf-ways li{border-bottom:1px solid var(--c-line)} #clay-page.cutaway .l-cwf-ways a{display:flex;align-items:center;gap:calc(var(--c-u)*2); padding:calc(var(--c-u)*2.5) 0;color:inherit;text-decoration:none} #clay-page.cutaway .l-cwf-ways a:hover .l-cw-disc{background:var(--c-accent); color:var(--c-flip-ink)} #clay-page.cutaway .l-cwf-ways span{display:flex;flex-direction:column;gap:2px;min-width:0} #clay-page.cutaway .l-cwf-ways em{font-style:normal;color:var(--c-soft); font:var(--c-t0)/1 var(--c-label);letter-spacing:.1em;text-transform:uppercase} #clay-page.cutaway .l-cwf-ways b{font:600 var(--c-t1)/1.3 var(--c-body)} /** * THE MENU ITSELF — a course at a time, two dishes to a line. * * The name and the price meet across a hairline, which is what a printed menu does and the reason * the mono face is here: a column of figures that does not line up is a column of figures nobody * trusts. The course's own name is the only thing set in the display face, so the page reads as a * few large headings with a table under each rather than as forty equal rows. */ #clay-page.cutaway .l-cwm-strip{display:flex;flex-wrap:wrap;gap:calc(var(--c-u)*1.5); margin-bottom:calc(var(--c-u)*6)} #clay-page.cutaway .l-cwm-chip{appearance:none;cursor:pointer; padding:calc(var(--c-u)*1) calc(var(--c-u)*2.5);border:1px solid var(--c-line); border-radius:999px;background:none;color:var(--c-soft); font:600 var(--c-t1)/1.4 var(--c-body);transition:color .16s ease,border-color .16s ease} #clay-page.cutaway .l-cwm-chip:hover{color:var(--c-ink);border-color:var(--c-ink)} /* the chosen chip is the ink block — `--c-flip-ink` is what sits ON it; `--c-flip` is the SURFACE, and using it here put white words on a white pill. */ #clay-page.cutaway .l-cwm-chip.c-on{background:var(--c-ink);border-color:var(--c-ink); color:var(--c-flip-ink)} #clay-page.cutaway .l-cwm-chip:focus-visible{outline:2px solid var(--c-accent);outline-offset:3px} #clay-page.cutaway .l-cwm-all{display:flex;flex-direction:column;gap:calc(var(--c-u)*8)} #clay-page.cutaway .l-cwm-h{display:flex;align-items:baseline;justify-content:space-between; gap:calc(var(--c-u)*3);padding-bottom:calc(var(--c-u)*2); border-bottom:1px solid var(--c-line)} #clay-page.cutaway .l-cwm-n{margin:0;font:600 var(--c-t4)/1.1 var(--c-display);font-stretch:104%; letter-spacing:var(--c-track)} #clay-page.cutaway .l-cwm-when{color:var(--c-soft);font:var(--c-t0)/1 var(--c-label); letter-spacing:.1em;text-transform:uppercase;white-space:nowrap} #clay-page.cutaway .l-cwm-note{margin:calc(var(--c-u)*2) 0 0;color:var(--c-soft); font:var(--c-t1)/1.5 var(--c-body);max-width:var(--c-measure)} #clay-page.cutaway .l-cwm-set{list-style:none;margin:calc(var(--c-u)*3) 0 0;padding:0; display:grid;grid-template-columns:repeat(2, minmax(0,1fr)); gap:calc(var(--c-u)*1) calc(var(--c-u)*6)} #clay-page.cutaway .l-cwm-d{display:flex;align-items:flex-start;gap:calc(var(--c-u)*2); padding:calc(var(--c-u)*2) 0;border-bottom:1px solid var(--c-line);min-width:0} #clay-page.cutaway .l-cwm-pic{flex:0 0 auto;width:calc(var(--c-u)*6);border-radius:var(--c-r); overflow:hidden;cursor:pointer} #clay-page.cutaway .l-cwm-pic .c-media{border-radius:var(--c-r);overflow:hidden} #clay-page.cutaway .l-cwm-w{display:flex;flex-direction:column;gap:calc(var(--c-u)*.5); flex:1 1 auto;min-width:0} /* the name and the price meet across the line — the price never moves, whatever the name's length */ #clay-page.cutaway .l-cwm-l{display:flex;align-items:baseline;justify-content:space-between; gap:calc(var(--c-u)*2)} #clay-page.cutaway .l-cwm-l b{font:600 var(--c-t1)/1.35 var(--c-body);min-width:0} #clay-page.cutaway .l-cwm-l em{font-style:normal;flex:0 0 auto;color:var(--c-ink); font:600 var(--c-t1)/1.35 var(--c-label);font-variant-numeric:tabular-nums; letter-spacing:.04em} #clay-page.cutaway .l-cwm-s{color:var(--c-soft);font:var(--c-t0)/1.45 var(--c-body)} #clay-page.cutaway .l-cwm-tags{display:flex;flex-wrap:wrap;gap:calc(var(--c-u)*1); margin-top:calc(var(--c-u)*.5)} #clay-page.cutaway .l-cwm-tag{padding:1px calc(var(--c-u)*1.25);border:1px solid var(--c-line); border-radius:999px;font:var(--c-t0)/1.6 var(--c-label);letter-spacing:.1em; text-transform:uppercase;color:var(--c-soft)} /** * EVERY PRODUCT — the price seated in a bite out of the photograph's top-right corner. * * This is the one place on the site where the theme's own rule pays for itself: a figure has to be * readable over a photograph nobody chose the colour of, and a hole in the picture does it without * a scrim, a chip or a shadow. The gap is the price's own size — `padding` on the label, not a * token — which is why one length could never have drawn all three notches on this design. * * The fillet is the same radial gradient as the running number, turned the other way round. */ :is(#clay-page,#design-sheets).cutaway .l-cws-set{--bandg:var(--g,var(--c-paper))} #clay-page.cutaway .l-cws-set{display:grid;gap:calc(var(--c-u)*4) calc(var(--c-u)*3); grid-template-columns:repeat(var(--cols, 4), minmax(0,1fr))} #clay-page.cutaway .l-cws-note{margin:0 0 calc(var(--c-u)*4);color:var(--c-soft); font:var(--c-t1)/1.5 var(--c-body)} #clay-page.cutaway .l-cws-c{display:flex;flex-direction:column;align-items:flex-start; gap:calc(var(--c-u)*1.5);min-width:0} /* THE PICTURE IS NOT THE CLIP. The price block sits in the picture's top-right corner, and with `overflow:hidden` on the wrapper the corner radius ate the last character of every price — "$6…" on all five cards. The rounding belongs to the MEDIA; the corner block sits over it. */ #clay-page.cutaway .l-cws-pic{position:relative;display:block;width:100%; border-radius:var(--c-r-lg);background:var(--c-fill)} #clay-page.cutaway .l-cws-pic > a{display:block} #clay-page.cutaway .l-cws-pic .c-media{border-radius:var(--c-r-lg);overflow:hidden} /* the bite: a block of the BAND's ground in the corner, with the price in it. Its own outer corner takes the picture's radius, so the two read as one silhouette rather than a sticker on it. */ #clay-page.cutaway .l-cws-p{position:absolute;top:0;right:0;z-index:2; padding:calc(var(--c-u)*.5) calc(var(--c-u)*1.5) calc(var(--c-u)*1.5) calc(var(--c-u)*2); background:var(--bandg,var(--c-paper)); border-radius:0 var(--c-r-lg) 0 var(--c-r); font:600 var(--c-t1)/1.6 var(--c-label);font-variant-numeric:tabular-nums; letter-spacing:.04em;color:var(--c-ink)} /* the two fillets that turn the corner — the ground folding into the picture, not a step cut out */ #clay-page.cutaway .l-cws-p::after{ content:"";position:absolute;top:0;right:100%;width:var(--c-r);height:var(--c-r); pointer-events:none;background:radial-gradient(circle at 0 100%, transparent var(--c-r), var(--bandg,var(--c-paper)) calc(var(--c-r) + .5px))} #clay-page.cutaway .l-cws-p::before{ content:"";position:absolute;top:100%;right:0;width:var(--c-r);height:var(--c-r); pointer-events:none;background:radial-gradient(circle at 0 100%, transparent var(--c-r), var(--bandg,var(--c-paper)) calc(var(--c-r) + .5px))} /* a product with no photograph still has a price, and it is a plain figure over the words */ #clay-page.cutaway .l-cws-p-alone{position:static;padding:0;background:none;border-radius:0} #clay-page.cutaway .l-cws-p-alone::after{display:none} #clay-page.cutaway .l-cws-w{display:flex;flex-direction:column;align-items:flex-start; gap:calc(var(--c-u)*.75);margin:calc(var(--c-u)*1) 0 calc(var(--c-u)*2)} #clay-page.cutaway .l-cws-t{font:600 var(--c-t2)/1.2 var(--c-display);font-stretch:104%; letter-spacing:var(--c-track)} #clay-page.cutaway .l-cws-t a{color:inherit;text-decoration:none} #clay-page.cutaway .l-cws-t a:hover{color:var(--c-accent-ink)} #clay-page.cutaway .l-cws-s{color:var(--c-soft);font:var(--c-t1)/1.45 var(--c-body)} #clay-page.cutaway .l-cws-tags{display:flex;flex-wrap:wrap;gap:calc(var(--c-u)*1)} #clay-page.cutaway .l-cws-tag{padding:2px calc(var(--c-u)*1.25);border:1px solid var(--c-line); border-radius:999px;font:var(--c-t0)/1.6 var(--c-label);letter-spacing:.1em; text-transform:uppercase;color:var(--c-soft)} /* every card's button on the same line, whatever length the notes came out — the cards are the same height already (the grid stretches them), so the button takes what is left. */ #clay-page.cutaway .l-cws-buy{appearance:none;cursor:pointer;margin-top:auto; padding:calc(var(--c-u)*1.25) calc(var(--c-u)*2.5);border:0;border-radius:999px; background:var(--c-accent);color:var(--c-flip-ink);text-decoration:none; font:600 var(--c-t1)/1 var(--c-body);transition:opacity .16s ease} #clay-page.cutaway .l-cws-buy:hover{opacity:.86} #clay-page.cutaway .l-cws-buy:focus-visible{outline:2px solid var(--c-accent);outline-offset:3px} /* SOLD OUT is a state, not a style: the picture goes quiet and the button goes away. */ #clay-page.cutaway .l-cws-sold .l-cws-pic, #clay-page.cutaway .l-cws-sold .l-cws-w{opacity:.5} #clay-page.cutaway .l-cws-sold .l-cws-buy{display:none} /** * THE PHOTOGRAPHS — one given real size, the rest ranked beside it. * * An equal grid of squares makes a business's own pictures look like stock. The first photograph is * the one they chose first, so it is the one that gets the room. */ #clay-page.cutaway .l-cwg-set{display:grid; grid-template-columns:repeat(var(--cols, 4), minmax(0,1fr)); gap:calc(var(--c-u)*2)} #clay-page.cutaway .l-cwg-t{appearance:none;border:0;padding:0;background:none;cursor:pointer; border-radius:var(--c-r);overflow:hidden;position:relative} /* the big tile is four cells; at two photographs it is two, lying down. The drawing picks the column count so that `k + 3` divides by it — see `fit` in shapes.js — so there is never a hole. */ #clay-page.cutaway .l-cwg-set[data-big="4"] .l-cwg-big{grid-column:span 2;grid-row:span 2} #clay-page.cutaway .l-cwg-set[data-big="2"] .l-cwg-big{grid-column:span 2;grid-row:span 1} #clay-page.cutaway .l-cwg-t .c-media{height:100%} #clay-page.cutaway .l-cwg-t img{transition:transform .3s ease,opacity .16s ease} #clay-page.cutaway .l-cwg-t:hover img{transform:scale(1.02);opacity:.92} #clay-page.cutaway .l-cwg-t:focus-visible{outline:2px solid var(--c-accent);outline-offset:3px} /** * WHERE WE ARE — the map framed, the week as a table in the mono face. * * Seven rows of times ARE a table, and a table set in a proportional face never lines up. This is * the third place the mono earns its keep, after the score and the running numbers. */ /* the words column and the map are the band's two halves, so the split is stated on the band rather than on a grid inside one of them — which is what made the map postcard-sized. The words start at the top; the map stretches to whatever height they take. */ :is(#clay-page,#design-sheets).cutaway .l-cwv > .c-in{--c-split:7fr 5fr;--c-align:start} #clay-page.cutaway .l-cwv-map{align-self:stretch} #clay-page.cutaway .l-cwv-map .c-media{border-radius:var(--c-r-lg);overflow:hidden;height:100%} #clay-page.cutaway .l-cwv-side{display:flex;flex-direction:column;align-items:flex-start; gap:calc(var(--c-u)*3)} #clay-page.cutaway .l-cwv-side .l-cw-head-w{margin:0} #clay-page.cutaway .l-cwv-a{margin:0;font:600 var(--c-t2)/1.4 var(--c-body)} #clay-page.cutaway .l-cwv-now{margin:0;color:var(--c-accent-ink);font:600 var(--c-t1)/1 var(--c-body)} #clay-page.cutaway .l-cwv-week{list-style:none;margin:0;padding:0;width:100%; border-top:1px solid var(--c-line)} #clay-page.cutaway .l-cwv-week li{display:flex;justify-content:space-between; gap:calc(var(--c-u)*2);padding:calc(var(--c-u)*1.25) 0;border-bottom:1px solid var(--c-line); font:var(--c-t1)/1 var(--c-label);font-variant-numeric:tabular-nums} #clay-page.cutaway .l-cwv-week b{font-weight:500;color:var(--c-soft);letter-spacing:.04em} #clay-page.cutaway .l-cwv-week em{font-style:normal;color:var(--c-ink)} /** * THE QUESTIONS — rows separated by a hairline, and the mark turns rather than swaps. * * `asks()` supplies the machinery (one open at a time, via a shared `name`). This supplies the * rules between rows and the plus that becomes a minus by rotating — a mark that is REPLACED on * open reads as two different icons; one that turns reads as the same thing moving. */ #clay-page.cutaway .l-cwq-set{border-top:1px solid var(--c-line)} #clay-page.cutaway .l-cwq-set .c-ask{border-bottom:1px solid var(--c-line); border-radius:0;background:none;padding:0} #clay-page.cutaway .l-cwq-set .c-ask summary{padding:calc(var(--c-u)*2.5) 0; font:600 var(--c-t2)/1.35 var(--c-body);cursor:pointer; transition:color .16s ease} #clay-page.cutaway .l-cwq-set .c-ask summary:hover{color:var(--c-accent-ink)} #clay-page.cutaway .l-cwq-set .c-ask .c-line{padding-bottom:calc(var(--c-u)*2.5);margin:0; color:var(--c-soft);max-width:var(--c-measure)} #clay-page.cutaway .l-cwq-more{margin-top:calc(var(--c-u)*4)} /** * THE END — the one light band on the page. * * It flips, and it is the only band that does, which is the whole reason it stops you. The words * take the measure and the way in stays the same disc the rest of the page uses: a bigger button * here would be this design shouting at the end of a page that never raised its voice. */ :is(#clay-page,#design-sheets).cutaway .l-cwc{--c-soft:color-mix(in oklab, var(--c-flip-ink) 62%, var(--c-flip)); --c-line:color-mix(in oklab, var(--c-flip-ink) 18%, var(--c-flip))} #clay-page.cutaway .l-cwc-in{display:flex;flex-direction:column;align-items:flex-start; gap:calc(var(--c-u)*3);max-width:var(--c-measure)} #clay-page.cutaway .l-cwc-t{margin:0;font-stretch:108%;line-height:1.06} #clay-page.cutaway .l-cwc-l{margin:0;color:var(--c-soft)} /** * THE PHONE — one column everywhere, and the gallery keeps its ranking. * * A set of doors, quotations or facts is a decision, and a decision you swipe to see the rest of is * one made for you. Only the gallery stays two-wide, because photographs ARE skimmed and the first * one keeping its size is the whole idea of that band. */ @container page (max-width:760px){ #clay-page.cutaway .l-cwr-row{grid-template-columns:1fr;gap:calc(var(--c-u)*5)} #clay-page.cutaway .l-cwa-body{grid-template-columns:1fr;gap:calc(var(--c-u)*4)} #clay-page.cutaway .l-cwf-set{grid-template-columns:1fr} #clay-page.cutaway .l-cwm-set{grid-template-columns:1fr;gap:0} #clay-page.cutaway .l-cws-set{grid-template-columns:repeat(2, minmax(0,1fr))} #clay-page.cutaway .l-cwg-set{grid-template-columns:repeat(2, minmax(0,1fr))} #clay-page.cutaway .l-cwg-set[data-big="4"] .l-cwg-big, #clay-page.cutaway .l-cwg-set[data-big="2"] .l-cwg-big{grid-column:span 2;grid-row:span 1} #clay-page.cutaway .l-cwa-facts{gap:calc(var(--c-u)*3)} } /** * THE BAND WRAPPERS THEMSELVES. * * Every class a theme EMITS is a class it styles — a test says so, and the reason is that a class * with no rule draws as whatever the browser happens to do, which is the one kind of bug nobody * sees until a customer does. These five carry nothing but the band's own rhythm: their insides * are styled above. */ #clay-page.cutaway .l-cwr, #clay-page.cutaway .l-cwa, #clay-page.cutaway .l-cwg, #clay-page.cutaway .l-cwv, #clay-page.cutaway .l-cwf, #clay-page.cutaway .l-cwm, #clay-page.cutaway .l-cws, #clay-page.cutaway .l-cwp, #clay-page.cutaway .l-cwq, #clay-page.cutaway .l-cwc, #clay-page.cutaway .l-cwd{position:relative}