/* ========================================================================== DRAFT PAPER — hand-drawn technical lettering, supplied by Bella. Extended by src/extend-font.py: the digit one redrawn with a flag and base bar (it shared an outline with I and l), plus — – · • ' ! ( ) ? → added in the same 62-unit round-capped stroke. The ampersand still needs a hand and falls back to Archivo. Inlined as base64 so the single-file build carries it with no request. ========================================================================== */ @font-face{ font-family:'Draft Paper'; src:url(data:font/ttf;base64,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) format('truetype'); font-weight:400;font-style:normal;font-display:swap; } /* ========================================================================== Bella Boak — portfolio Direction: "Index" v2 — archival register on a drafting sheet Vibe borrowed from: USPTO patent sheets, engineering sketch pads with corner title blocks, Apollo flight-plan books, 1900s trade-press columns. Structure NOT borrowed from them — those pages are flat because every element is the same size. Hierarchy here stays editorial: one dominant headline, one dominant list, technical apparatus kept small and quiet at the edges. ========================================================================== */ /* --- 1. TOKENS ----------------------------------------------------------- */ :root{ /* THE PANEL. Every card, table, holder and form on the site is this colour: one clear step brighter than the paper ground, very slightly cool against its warmth, so a card reads as a fresh sheet laid on the desk rather than a tint of it. */ --panel:#fcfcfa; --panel-edge:rgba(23,23,26,.17); --panel-lift:0 1px 0 rgba(255,255,255,.9), 0 2px 9px rgba(23,23,26,.045); /* THE BODY VOICE. Zilla Slab is a slab serif with typewriter bones — typed in feel, but proportional, so long copy stays comfortable. To push all the way to a real typewriter, comment the first line and uncomment the second. Nothing else needs to change; the sizes below already suit both. */ --body:'Zilla Slab','Source Serif 4',Georgia,'Courier New',serif; /* --body:'Courier Prime','Courier New',monospace; <- full typewriter */ /* the label voice — Draft Paper, with Archivo picking up what it lacks */ --hand-tech:'Draft Paper','Archivo','Helvetica Neue',Arial,sans-serif; /* two-colour press: paper, ink, one spot. Everything else is a mix. */ --paper:#f3f0e7; --ink:#17171a; --spot:#a8371f; /* the red dimension lines */ --stampred:#8d2a16; /* struck rubber-stamp ink (matches stamps.js) */ --stampdeep:#7a2412; /* the same ink, pressed harder */ --ink-70:rgba(23,23,26,.70); --ink-55:rgba(23,23,26,.55); --ink-38:rgba(23,23,26,.38); --ink-26:rgba(23,23,26,.26); --rule:rgba(23,23,26,.22); --rule-soft:rgba(23,23,26,.11); --spot-tint:rgba(168,55,31,.07); /* the graph-paper ground — two densities, drafting blue */ --grid-minor:rgba(64,96,140,.085); --grid-major:rgba(64,96,140,.155); --grid-step:23px; /* minor division */ --grid-block:115px; /* 5 minor = 1 major */ --pad:40px; --max:1180px; --frame:18px; /* drawing-frame inset */ } @media(max-width:760px){ :root{ --pad:20px; --frame:8px; } } *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%} /* --- 2. THE SHEET -------------------------------------------------------- */ body{ margin:0; color:var(--ink); font-family:var(--body); font-size:18.5px; line-height:1.58; font-variant-numeric:oldstyle-nums proportional-nums; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; background-color:var(--paper); background-image: linear-gradient(var(--grid-minor) 1px,transparent 1px), linear-gradient(90deg,var(--grid-minor) 1px,transparent 1px), linear-gradient(var(--grid-major) 1px,transparent 1px), linear-gradient(90deg,var(--grid-major) 1px,transparent 1px); background-size: var(--grid-step) var(--grid-step), var(--grid-step) var(--grid-step), var(--grid-block) var(--grid-block), var(--grid-block) var(--grid-block); background-position:0 0; background-attachment:fixed; } /* the drawing frame — a ruled border inset from the sheet edge */ /* The frame's top edge rests in the gap between the banner text and the menu tabs — under the heading band, above everything else. The banner's bottom padding is what makes room for it; move them together. */ .frame{ position:fixed;inset:var(--frame-top,53px) var(--frame) var(--frame); border:1px solid var(--ink-26); pointer-events:none;z-index:80; } /* registration / crop marks at the four corners */ .frame::before,.frame::after{ content:"";position:absolute;width:9px;height:9px;pointer-events:none; } .frame::before{top:-1px;left:-1px;border-top:2px solid var(--ink);border-left:2px solid var(--ink)} .frame::after{bottom:-1px;right:-1px;border-bottom:2px solid var(--ink);border-right:2px solid var(--ink)} @media(max-width:760px){.frame{display:none}} /* the vertical title block, pinned to the left edge of the sheet. Straight off the engineering sketch pad. Wide screens only. */ .titleblock{ position:fixed;left:calc(var(--frame) + 1px);top:170px;z-index:81; display:flex;flex-direction:column; border:1px solid var(--ink-26);border-left:0; background:rgba(243,240,231,.86);backdrop-filter:blur(3px); } .titleblock div{ writing-mode:vertical-rl;transform:rotate(180deg); padding:13px 6px;border-bottom:1px solid var(--ink-26); font-family:var(--hand-tech); font-size:11.5px;letter-spacing:.10em;text-transform:uppercase; color:rgba(23,23,26,.82);-webkit-text-stroke:.3px currentColor;paint-order:stroke fill;white-space:nowrap; } .titleblock div:last-child{border-bottom:0} .titleblock b{font-weight:600;color:var(--ink)} .titleblock .hot{color:var(--spot)} @media(max-width:1340px){.titleblock{display:none}} .wrap{max-width:var(--max);margin:0 auto;padding:0 var(--pad);position:relative} /* --- 3. TYPE ROLES ------------------------------------------------------- */ /* technical label — the single-stroke gothic of a drawing sheet */ .tag{ color:rgba(23,23,26,.88); font-family:var(--hand-tech); font-size:12px;letter-spacing:.09em;text-transform:uppercase;font-weight:400; -webkit-text-stroke:.34px currentColor; /* monoline needs body, not grey */ paint-order:stroke fill; font-variant-numeric:lining-nums tabular-nums; color:var(--ink-55); } /* data — anything that would be a figure in a table */ .data{ font-family:'Courier Prime','JetBrains Mono',ui-monospace,Courier,monospace; font-size:12px;letter-spacing:.03em; font-variant-numeric:lining-nums tabular-nums; font-variant-ligatures:none; color:var(--ink-55); } .dim{color:var(--ink-38)} .hot{color:var(--spot)} .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} a{color:inherit} a:focus-visible{outline:2px solid var(--spot);outline-offset:3px} .skip{position:absolute;left:-9999px;background:var(--ink);color:var(--paper);padding:10px 16px;z-index:200} .skip:focus{left:8px;top:8px} /* --- 4. BANNER + FILE TABS ----------------------------------------------- */ /* The banner is a masthead rule, not a heading. It sits hard against the top edge of the sheet at label size so there is only ever ONE heading on a page. */ /* generous head-space: the name band reads as a banner, the frame line rests in the air beneath it, and the menu starts below the line */ .banner{ display:flex;justify-content:space-between;align-items:baseline;gap:14px; padding:18px 0 34px;flex-wrap:wrap; } .banner .who{color:var(--ink-70);letter-spacing:.20em} .banner .who b{font-weight:700;color:var(--ink)} /* Folder tabs — the footer detail she liked, promoted to primary navigation. The active tab loses its bottom edge so it merges into the sheet below. */ .filetabs{display:flex;gap:5px;align-items:flex-end;position:relative;z-index:2;margin-bottom:-1px} .filetabs a{ text-decoration:none;padding:9px 20px 10px; border:1px solid var(--ink-26);border-bottom:1px solid var(--ink); border-radius:3px 14px 0 0;background:rgba(23,23,26,.035); transition:background .16s,color .16s,padding .16s; } .filetabs a:hover{background:var(--panel)} .filetabs a:hover .tag{color:var(--ink)} .filetabs a[aria-current="page"]{ background:var(--panel);border-bottom-color:transparent; border-top-width:2px;padding-top:12px; } .filetabs a[aria-current="page"] .tag{color:var(--spot)} .tabrule{border-bottom:1px solid var(--ink);height:0;position:relative;z-index:1} /* a page whose first element is a panel attaches it straight to the tabs */ .attached{margin-top:0} .attached .contents,.attached .folder,.attached .masthead,.attached .telegram,.attached .idcard{border-top:0;box-shadow:none; border-left:1px solid var(--panel-edge);border-right:1px solid var(--panel-edge)} @media(max-width:620px){ .filetabs{gap:3px} .filetabs a{padding:8px 12px 9px} .filetabs a[aria-current="page"]{padding-top:10px} } /* --- 5. HERO ------------------------------------------------------------- */ .hero{padding:104px 0 74px} @media(max-width:760px){.hero{padding:54px 0 42px}} .hero h1{ font-size:clamp(37px,6.2vw,72px);line-height:1.03;font-weight:300; letter-spacing:-.026em;margin:0;max-width:17ch; } .hero h1 em{font-style:italic;color:var(--spot)} .hero .stand{ margin:26px 0 0;max-width:46ch;font-size:19px;line-height:1.5;color:var(--ink-70); } /* a pencilled annotation, used once per page at most */ .annot{ font-family:'Architects Daughter',cursive;font-size:19px;line-height:1.3; color:var(--spot);opacity:.9; } /* Reference numerals, patent-style: a spot-red digit on a short lead line, sitting in the corner of the thing it refers to. */ .hero-meta{ display:grid;grid-template-columns:repeat(3,minmax(0,1fr)); border:1px solid var(--rule);margin-top:44px;max-width:900px; counter-reset:ref; } .hero-meta > div{padding:14px 17px;border-right:1px solid var(--rule);position:relative;counter-increment:ref} .hero-meta > div:last-child{border-right:0} .hero-meta > div::before{ content:counter(ref); position:absolute;top:-9px;right:12px; background:var(--paper);padding:0 5px; font-family:'Courier Prime',Courier,monospace;font-size:10.5px; font-variant-numeric:lining-nums;color:var(--spot); } .hero-meta > div::after{ content:"";position:absolute;top:-1px;right:17px;width:1px;height:11px; background:var(--spot);opacity:.45; } .hero-meta p{margin:8px 0 0;font-size:16.5px;line-height:1.5;color:var(--ink-70)} @media(max-width:760px){ .hero-meta{grid-template-columns:1fr} .hero-meta > div{border-right:0;border-bottom:1px solid var(--rule)} .hero-meta > div:last-child{border-bottom:0} } /* --- 6. SECTION HEAD as a dimension line -------------------------------- */ .sechead{display:flex;align-items:center;gap:14px;margin:0 0 2px} .sechead h2{ margin:0;font-size:16px;font-weight:400;letter-spacing:.005em;white-space:nowrap; font-variant-caps:all-small-caps;letter-spacing:.1em; } .sechead .dimline{ flex:1;height:7px;position:relative; border-left:1px solid var(--ink-38);border-right:1px solid var(--ink-38); } .sechead .dimline::after{ content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:var(--ink-26); } .sechead + .rulehard{border-top:1px solid var(--ink);height:0;margin-bottom:0} /* --- 7. THE INDEX (signature element, hierarchy intact) ----------------- */ .rows{list-style:none;margin:0;padding:0} .row{border-bottom:1px solid var(--rule-soft)} .row a{ display:grid;grid-template-columns:52px 1fr 1fr 92px 62px;gap:18px;align-items:baseline; padding:22px 0;text-decoration:none;transition:padding .22s,background .22s; } .row a:hover,.row a:focus-visible{padding-left:14px;background:linear-gradient(90deg,var(--spot-tint),transparent 64%)} .row .num{color:var(--ink-26);transition:color .18s} .row a:hover .num{color:var(--spot)} .row .ttl{font-size:25px;letter-spacing:-.017em;line-height:1.18;transition:color .18s} .row a:hover .ttl,.row a:focus-visible .ttl{color:var(--spot)} .row .dsc{font-size:16.5px;color:var(--ink-70);line-height:1.46} .row .cat{color:var(--ink-38)} .row .sheet{text-align:right;color:var(--ink-26)} @media(max-width:940px){ .row a{grid-template-columns:38px 1fr auto;gap:5px 14px;padding:19px 0} .row .dsc{grid-column:2/-1} .row .cat{grid-column:2;margin-top:5px} .row .sheet{grid-column:3;grid-row:1;text-align:right} } /* hover plate preview — framed, captioned, with corner ticks */ #peek{ position:fixed;width:312px;pointer-events:none;z-index:70; opacity:0;transform:translate(-50%,-50%) scale(.95); transition:opacity .2s ease,transform .2s ease; background:var(--panel);border:1px solid var(--ink); box-shadow:0 22px 54px rgba(0,0,0,.20); } #peek.on{opacity:1;transform:translate(-50%,-50%) scale(1)} #peek{width:352px} #peek .plate{border-bottom:1px solid var(--ink);position:relative;aspect-ratio:840/560} #peek .plate::before,#peek .plate::after{ content:"";position:absolute;width:10px;height:10px; } #peek .plate::before{top:6px;left:6px;border-top:1px solid rgba(255,255,255,.6);border-left:1px solid rgba(255,255,255,.6)} #peek .plate::after{bottom:6px;right:6px;border-bottom:1px solid rgba(255,255,255,.6);border-right:1px solid rgba(255,255,255,.6)} #peek .cap{padding:7px 11px 8px} #peek .cap .tag{ display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ink); } @media(max-width:940px),(hover:none){#peek{display:none!important}} /* --- 8. DATA TABLE (press, specs) --------------------------------------- */ .table{width:100%;border-collapse:collapse;border:1px solid var(--panel-edge);margin:0; background:var(--panel);box-shadow:var(--panel-lift)} .table caption{text-align:left;padding-bottom:9px} .table th{ text-align:left;padding:9px 14px;border-bottom:1px solid var(--ink); border-right:1px solid var(--rule);vertical-align:bottom; font-family:var(--hand-tech); font-size:11.5px;letter-spacing:.10em;text-transform:uppercase;color:rgba(23,23,26,.88); -webkit-text-stroke:.3px currentColor;paint-order:stroke fill; } .table td{ padding:13px 15px;border-bottom:1px solid var(--rule-soft); border-right:1px solid var(--rule-soft);vertical-align:baseline; } .table th:last-child,.table td:last-child{border-right:0} .table tr:last-child td{border-bottom:0} .table tbody tr:hover{background:var(--spot-tint)} .table.spec{max-width:660px} .table.spec td:first-child,.table.spec th:first-child{width:168px} /* --- 404: an empty slide ------------------------------------------------- */ .lost{padding:72px 0 44px;max-width:640px} .lostslide{width:280px;margin-bottom:36px} .lostbed{aspect-ratio:3/2;display:grid;place-items:center} /* the bed holds nothing but the mounting mark where a specimen should be */ .lostbed::after{content:"\2014";font-family:'Courier Prime',monospace;font-size:24px;color:var(--ink-26)} .lost h1{margin:0 0 12px;font-size:clamp(28px,4vw,38px);font-weight:400;letter-spacing:-.02em} /* --- home: closing contact block ----------------------------------------- */ .reachline{margin:0;max-width:56ch;font-size:18.5px;line-height:1.6;color:var(--ink-70)} .reachcard{ background:var(--panel);padding:30px 30px 34px;margin-top:26px; border-left:1px solid var(--panel-edge);border-right:1px solid var(--panel-edge); } /* the sheet-header breadcrumb: each segment goes somewhere real */ .crumbs a{color:inherit;text-decoration:none;border-bottom:1px solid transparent;transition:color .18s,border-color .18s} .crumbs a:hover{color:var(--spot);border-bottom-color:rgba(168,55,31,.4)} .crumbs a:hover .data{color:var(--spot)} /* --- project details: the old site's record block in telegram cells ------- */ /* Sits between the sheet header and the lead figure. First three fields share a row; longer fields span the width beneath. */ .pmeta{ display:grid;grid-template-columns:repeat(3,minmax(0,1fr)); border:1px solid var(--rule);background:var(--panel); margin-bottom:34px; } .pcell{padding:12px 16px 13px;border-right:1px solid var(--rule);display:grid;gap:3px} .pcell:nth-child(3n),.pcell.wide{border-right:0} .pcell.wide{grid-column:1/-1;border-top:1px solid var(--rule)} @media(max-width:720px){ .pmeta{grid-template-columns:1fr} .pcell{border-right:0;border-top:1px solid var(--rule)} .pcell:first-child{border-top:0} } .table .c-date{width:118px;white-space:nowrap} .table .c-pub{font-size:17.5px} .table .c-item{color:var(--ink-70);font-size:16.5px} @media(max-width:700px){ .table,.table tbody,.table tr,.table td{display:block;width:100%} .table thead{display:none} .table tr{border-bottom:1px solid var(--rule);padding:12px 0} .table tr:last-child{border-bottom:0} .table td{border:0;padding:1px 14px} } /* --- 9. PROSE ------------------------------------------------------------ */ .prose{max-width:58ch} .prose p{margin:0 0 22px;font-size:18.5px;line-height:1.64} .prose p:last-child{margin-bottom:0} .prose h3{ margin:36px 0 9px;font-size:16px;font-weight:400; font-family:var(--hand-tech); letter-spacing:.08em;text-transform:uppercase;color:rgba(23,23,26,.88); -webkit-text-stroke:.34px currentColor;paint-order:stroke fill; } .prose h3:first-child{margin-top:0} .prose a{color:var(--spot);text-decoration:none;border-bottom:1px solid rgba(168,55,31,.35)} /* lede paragraph opens with small-cap phrase, not a drop cap */ .prose .lede::first-line{font-variant-caps:all-small-caps;letter-spacing:.04em} .cols{display:grid;grid-template-columns:158px 1fr;gap:44px;padding:54px 0 0} @media(max-width:860px){.cols{grid-template-columns:1fr;gap:14px;padding-top:36px}} .cols .aside .tag{display:block} /* --- 10. PROJECT PAGE ---------------------------------------------------- */ .proj-head{padding:66px 0 34px} @media(max-width:760px){.proj-head{padding:40px 0 26px}} .proj-head h1{ font-size:clamp(31px,5vw,56px);line-height:1.06;font-weight:300; letter-spacing:-.024em;margin:12px 0 0;max-width:19ch; } .proj-head .dek{margin:20px 0 0;font-size:20px;line-height:1.5;color:var(--ink-70);max-width:50ch} /* figures, numbered like plates */ .figs{margin:52px 0 0;display:grid;gap:16px} .figs.lead{margin:34px 0 0} .figs.pair{grid-template-columns:1fr 1fr} @media(max-width:780px){.figs.pair{grid-template-columns:1fr}} .fig{margin:0} .fig .holder{border:1px solid var(--panel-edge);padding:9px;background:var(--panel);box-shadow:var(--panel-lift)} .fig .ph,.fig img{width:100%;display:block} .fig figcaption{ display:flex;gap:10px;align-items:baseline;margin-top:8px; } .fig figcaption .n{color:var(--spot);white-space:nowrap} .nextproj{margin-top:88px;border-top:1px solid var(--ink);padding:22px 0 0} .nextproj a{display:flex;justify-content:space-between;align-items:baseline;gap:20px;text-decoration:none;padding:16px 0;transition:padding .22s} .nextproj a:hover{padding-left:12px} .nextproj .t{font-size:clamp(24px,3.4vw,38px);font-weight:300;letter-spacing:-.022em} .nextproj a:hover .t{color:var(--spot)} /* --- 10b. PLATE ARTWORK -------------------------------------------------- */ .plate-art{width:100%;height:auto;display:block} /* the hover preview holds a live plate, not a colour swatch */ #peek .plate{padding:0;overflow:hidden} #peek .plate .plate-art{height:100%;object-fit:cover} #plate-store{display:none} /* inventor's signature block, off the patent front page */ .sigblock{margin-top:30px} .sigblock .sig{ font-family:'Mrs Saint Delafield',cursive;font-size:44px;line-height:.9; color:var(--ink);display:block;margin-bottom:2px; } .sigblock .rule{border-bottom:1px solid var(--ink-26);width:210px;margin:4px 0 6px} /* --- 11. PLACEHOLDER BLOCKS --------------------------------------------- */ .ph{position:relative;overflow:hidden;background:#d9d6cd;aspect-ratio:16/10} .ph[data-ratio="4/5"]{aspect-ratio:4/5} .ph[data-ratio="1/1"]{aspect-ratio:1/1} .ph[data-ratio="3/2"]{aspect-ratio:3/2} .ph::after{ content:attr(data-ph);position:absolute;left:12px;bottom:10px; font-family:'Courier Prime',Courier,monospace;font-size:9.5px;letter-spacing:.13em; text-transform:uppercase;color:rgba(255,255,255,.72); } /* --- 12. FOOTER + TAB DIVIDERS ------------------------------------------ */ .foot{ margin-top:104px;border-top:1px solid var(--ink);padding:34px 0 66px;position:relative; } @media(max-width:640px){.foot{margin-top:66px}} .fmain{display:flex;align-items:center;justify-content:space-between;gap:34px;flex-wrap:wrap;position:relative} .sigblock{display:grid;gap:0} .sigblock .sig{ font-family:'Mrs Saint Delafield',cursive;font-size:56px;line-height:.86; color:var(--ink);margin-bottom:6px; } .sigblock .sigrule{display:block;width:270px;max-width:100%;border-bottom:1px solid var(--ink-38);margin-bottom:9px} .fsocials{ display:grid;grid-template-columns:repeat(4,minmax(0,1fr)); border:1px solid var(--rule);margin-top:38px;position:relative; } @media(max-width:760px){.fsocials{grid-template-columns:1fr 1fr}} .fsoc{ display:grid;gap:4px;padding:13px 15px;text-decoration:none; border-right:1px solid var(--rule-soft);transition:background .16s; } .fsoc:last-child{border-right:0} .fsoc:hover{background:var(--spot-tint)} .fsoc:hover .tag{color:var(--spot)} .fsoc .data{color:var(--ink-70);font-size:13px;overflow:hidden;text-overflow:ellipsis} @media(max-width:760px){ .fsoc:nth-child(2n){border-right:0} .fsoc:nth-child(-n+2){border-bottom:1px solid var(--rule-soft)} } .colophon{ margin:22px 0 0;max-width:62ch;position:relative; font-size:14px;line-height:1.62;color:var(--ink-38);font-style:italic; } .colophon .cdot{font-style:normal;padding:0 2px} /* --- 13. MOTION / PRINT -------------------------------------------------- */ @media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}} @media print{ body{background-image:none} .frame,.titleblock,#peek,.tabs{display:none} } /* ========================================================================== NEXT-LEVEL DETAILS 1 · revision block 2 · linked callouts 3 · plotter draw-on 4 · two-colour register, grain, tissue guards ========================================================================== */ /* --- 1 · revision block (ASME: fills downward, status at the right) ------- */ .revtable{max-width:660px} .revtable td.rev{width:56px;font-size:13px;color:var(--ink);font-weight:500} .revtable td.st{width:120px} .revtable td.st.now{color:var(--spot)} .revtable tbody tr:last-child td{background:var(--spot-tint)} /* --- 2 · linked callouts: prose <-> plate -------------------------------- */ .xref{ cursor:default;border-bottom:1px solid rgba(168,55,31,.30); transition:background .18s,border-color .18s;outline:none; } .xref sup{ font-family:'Courier Prime',Courier,monospace;font-size:9.5px;color:var(--spot); font-variant-numeric:lining-nums;margin-right:2px;vertical-align:super; } .xref:hover,.xref:focus-visible,.xref.lit{ background:rgba(168,55,31,.13);border-color:var(--spot); } .plate-art .ref{transition:opacity .2s} .plate-art .ref text{transition:font-size .18s} .plate-art.has-lit .ref{opacity:.22} .plate-art.has-lit .ref.lit{opacity:1} .plate-art .ref.lit path{stroke-width:2;stroke-opacity:1} .plate-art .ref.lit circle{opacity:1} .plate-art .ref.lit text{font-size:19px;font-weight:500} /* --- 3 · plotter draw-on -------------------------------------------------- */ /* JS measures each stroke and sets --len; these rules do the rest. */ .plate-art.will-draw .drawing [data-len]{ stroke-dasharray:var(--len);stroke-dashoffset:var(--len); } .plate-art.drawing-on .drawing [data-len]{ transition:stroke-dashoffset 1s cubic-bezier(.25,.8,.35,1); stroke-dashoffset:0; } .plate-art.will-draw .drawing text, .plate-art.will-draw .ref, .plate-art.will-draw .plate-label, .plate-art.will-draw .drawing [fill^="url"]{opacity:0} .plate-art.drawing-on .drawing text, .plate-art.drawing-on .ref, .plate-art.drawing-on .plate-label, .plate-art.drawing-on .drawing [fill^="url"]{ opacity:1;transition:opacity .55s ease .75s; } .plate-art.drawing-on .ref{transition:opacity .55s ease 1.05s} /* --- 4 · two-colour press ------------------------------------------------- */ /* The spot run sits a hair off register and multiplies where it overlaps ink, the way a second pass through the press actually behaves. */ .plate-art .ref, .plate-art .ref-note{ mix-blend-mode:multiply; transform:translate(.7px,-.45px); } .hero h1 em,.xref sup,.foot .mail,.filetabs a[aria-current="page"] .tag{ mix-blend-mode:multiply; } .hero-meta > div::before{mix-blend-mode:multiply} /* paper grain — one small tile, filtered once, then repeated */ body::after{ content:"";position:fixed;inset:0;pointer-events:none;z-index:90; opacity:.038;mix-blend-mode:multiply;background-size:170px 170px; background-image:url("data:image/svg+xml;utf8,"); } @media(prefers-reduced-transparency:reduce),print{body::after{display:none}} /* --- the loupe: figures open big, and page through as a carousel ---------- */ .lb-zoom{cursor:zoom-in} html.lb-lock{overflow:hidden} .loupe{ position:fixed;inset:0;z-index:200;display:none; align-items:center;justify-content:center;gap:14px;padding:34px 20px; background:rgba(23,23,26,.84); } .loupe.on{display:flex} /* the enlarged figure keeps its plate: panel ground, hairline edge, caption */ .loupe figure{ margin:0;max-width:min(1100px,84vw); background:var(--panel);border:1px solid var(--panel-edge); padding:10px 10px 6px;box-shadow:0 26px 70px rgba(0,0,0,.45); } .loupe img{display:block;max-width:100%;max-height:76vh;width:auto;height:auto;margin:0 auto} .loupe figcaption{display:flex;gap:16px;justify-content:space-between;align-items:baseline;padding:9px 4px 3px} .loupe .lb-n{color:var(--spot)} .loupe .lb-cap{color:var(--ink-62)} .loupe button{ background:none;border:0;cursor:pointer;color:var(--paper); font-family:var(--hand-tech);letter-spacing:.1em;padding:12px; transition:color .18s,transform .18s; } .loupe .lb-prev,.loupe .lb-next{font-size:30px;line-height:1;flex:none} .loupe .lb-prev:hover{transform:translateX(-3px)} .loupe .lb-next:hover{transform:translateX(3px)} .loupe .lb-x{position:absolute;top:16px;right:18px;font-size:20px} .loupe .lb-x .tag{color:rgba(243,240,231,.8);margin-right:6px} .loupe button:hover,.loupe .lb-x:hover .tag{color:#fff} @media(max-width:700px){ .loupe{gap:4px;padding:16px 6px} .loupe .lb-prev,.loupe .lb-next{padding:8px 4px} } /* (The tissue guard — a translucent leaf over every figure, lifted on hover — was cut at Bella's request, Aug 2026: it read as images being greyed out until moused over. In its place, photographs lean in a little.) */ .fig .holder{position:relative;overflow:hidden} .fig .holder img{transition:transform .55s cubic-bezier(.2,.8,.2,1)} .fig .holder:hover img{transform:scale(1.035)} @media(prefers-reduced-motion:reduce){.fig .holder:hover img{transform:none}} @media(prefers-reduced-motion:reduce){ .plate-art.will-draw .drawing [data-len]{stroke-dasharray:none;stroke-dashoffset:0} .plate-art.will-draw .drawing text, .plate-art.will-draw .ref, .plate-art.will-draw .plate-label, .plate-art.will-draw .drawing [fill^="url"]{opacity:1} } /* --- orthographic set, data plot, contact strip -------------------------- */ .holder.ortho{ display:grid;grid-template-columns:1fr 1fr;gap:9px;background:#efece2; } .holder.ortho .view{position:relative} .holder.ortho .vlabel{ display:flex;gap:7px;align-items:baseline;margin-top:7px;color:var(--ink-55); } .holder.ortho .vlabel i{ font-style:normal;color:var(--spot);font-family:'Courier Prime',Courier,monospace; font-size:11px;font-variant-numeric:lining-nums; } @media(max-width:620px){.holder.ortho{grid-template-columns:1fr}} .chart-art{background:#efece2} .contact{ display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:8px; border:1px solid var(--panel-edge);padding:10px;background:var(--panel);box-shadow:var(--panel-lift); } .contact .frame-cell{display:flex;flex-direction:column;gap:5px} .contact .fdate{color:var(--spot);opacity:.85} .contact .flabel{font-size:8.5px;letter-spacing:.10em;line-height:1.25} .contact .ph{border:1px solid rgba(23,23,26,.18)} @media(max-width:900px){ .contact{grid-template-columns:repeat(4,minmax(0,1fr))} } @media(max-width:520px){ .contact{grid-template-columns:repeat(2,minmax(0,1fr))} } /* ========================================================================== HOME: cards + buttons · WORK: full sheets · CLIENTS: slide tray ========================================================================== */ /* --- stamp buttons ------------------------------------------------------- Every action is struck from one die: double rule, four corner bullets, a lozenge either side of the label. The default die prints in the stamp red and leaves the label as red type; `primary` inks the block solid and knocks the label out as paper. Both are run through the SVG ink filters defined in the page (#btn-ink for open work, #btn-ink-solid for solids) so the edges break up like the press stamps. Hovering presses the stamp into the paper — scale, not colour, because a stamp cannot change its ink after striking. */ .btnrow{display:flex;gap:22px;align-items:center;flex-wrap:wrap;margin-top:40px} .btn{ display:inline-flex;align-items:center;justify-content:center;text-decoration:none; padding:14px 30px;position:relative;cursor:pointer; color:var(--stampred);background:none;border:2.5px solid currentColor; filter:url(#btn-ink); transition:transform .15s ease,opacity .15s ease; } .btn::before{content:"";position:absolute;inset:4px;border:1px solid currentColor;opacity:.62;pointer-events:none} /* the corner bullets that register the die */ .btn::after{ content:"";position:absolute;inset:0;pointer-events:none; background-image: radial-gradient(circle at 9px 9px,currentColor 2px,transparent 2.4px), radial-gradient(circle at calc(100% - 9px) 9px,currentColor 2px,transparent 2.4px), radial-gradient(circle at 9px calc(100% - 9px),currentColor 2px,transparent 2.4px), radial-gradient(circle at calc(100% - 9px) calc(100% - 9px),currentColor 2px,transparent 2.4px); opacity:.9; } .btn .lz{width:5px;height:5px;background:currentColor;transform:rotate(45deg);margin:0 13px;opacity:.85;flex:none} .btn .tag{color:inherit;letter-spacing:.15em} .btn:hover{transform:scale(.968);opacity:.86} .btn:active{transform:scale(.945)} .btn.primary{ color:var(--paper);background:var(--stampred);border-color:var(--stampred); filter:url(#btn-ink-solid); } .btn.primary .tag{letter-spacing:.185em;-webkit-text-stroke:.3px currentColor;paint-order:stroke fill} .btn.primary:hover{opacity:1;background:var(--stampdeep);border-color:var(--stampdeep)} /* --- home: small project cards ------------------------------------------ */ .cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px} @media(max-width:900px){.cards{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:600px){.cards{grid-template-columns:1fr}} .card{text-decoration:none;display:block} /* A card holder is sized by the plate inside it, and the plates are 840x560. A photograph has no such discipline, so it is cropped to the same 3:2 box — otherwise one tall image sets the height of the whole row. */ .card .holder img,.sheet .holder img{width:100%;display:block;aspect-ratio:3/2;object-fit:cover} .card .holder{ border:1px solid var(--panel-edge);padding:6px;background:var(--panel);box-shadow:var(--panel-lift); transition:border-color .2s,transform .3s cubic-bezier(.2,.9,.3,1);position:relative; } .card:hover .holder{border-color:var(--spot);transform:translateY(-5px)} /* focus brackets close in on the plate, like a viewfinder finding it */ .card .holder::before,.card .holder::after{ content:"";position:absolute;width:22px;height:22px;pointer-events:none; opacity:0;transition:opacity .22s ease,inset .34s cubic-bezier(.2,.9,.3,1); border-color:var(--spot); } .card .holder::before{top:-14px;left:-14px;border-top:2px solid;border-left:2px solid} .card .holder::after{bottom:-14px;right:-14px;border-bottom:2px solid;border-right:2px solid} .card:hover .holder::before{opacity:1;top:6px;left:6px} .card:hover .holder::after{opacity:1;bottom:6px;right:6px} /* and the record slides out from underneath */ .card .cbody{position:relative;overflow:hidden} .card .creveal{ display:flex;gap:12px;align-items:baseline; max-height:0;opacity:0;overflow:hidden; transition:max-height .32s ease,opacity .26s ease,margin-top .32s ease; } .card:hover .creveal{max-height:34px;opacity:1;margin-top:4px} .card .creveal .data{color:var(--spot)} .card .cbody{padding:11px 2px 0;border-top:1px solid var(--rule);margin-top:9px;display:grid;gap:5px} .card .num{color:var(--ink-26)} .card h3{margin:0;font-size:20px;font-weight:400;letter-spacing:-.016em;line-height:1.22} .card:hover h3{color:var(--spot)} .card p{margin:0;font-size:15.5px;line-height:1.45;color:var(--ink-70)} /* --- work page: a contents index, then the sheets ------------------------ */ .contents{ width:100%;border-collapse:collapse;border:1px solid var(--panel-edge); margin:0;background:var(--panel);box-shadow:var(--panel-lift); } .contents th{ text-align:left;padding:9px 14px;border-bottom:1px solid var(--ink); border-right:1px solid var(--rule); font-family:var(--hand-tech);font-size:11.5px;letter-spacing:.10em; text-transform:uppercase;color:rgba(23,23,26,.88); -webkit-text-stroke:.3px currentColor;paint-order:stroke fill; } .contents td{padding:9px 14px;border-bottom:1px solid var(--rule-soft);border-right:1px solid var(--rule-soft)} .contents th:last-child,.contents td:last-child{border-right:0} .contents tr:last-child td{border-bottom:0} .contents tbody tr.crow{cursor:pointer;transition:background .16s} .contents tbody tr.crow:hover,.contents tbody tr.crow:focus-visible{background:var(--spot-tint);outline:none} .contents tbody tr.crow:hover .cproj{color:var(--spot)} .contents .cclient{font-size:15.5px;color:var(--ink-70)} .contents .cno{width:44px;color:var(--ink-38)} .contents .cproj{font-size:17.5px;letter-spacing:-.012em} .contents .crest .cproj{color:var(--ink-70)} .redact.sm{font-size:.86em;padding:0 .3em} @media(max-width:720px){ .contents th:nth-child(4),.contents td:nth-child(4){display:none} } /* --- work page: text beside the plate, so the set can be scanned ---------- */ .sheet{ display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.22fr); gap:44px;align-items:center;text-decoration:none; padding:36px 0;border-bottom:1px solid var(--rule); transition:transform .32s cubic-bezier(.2,.9,.3,1); } /* the whole entry leans toward the cursor — barely, like a sheet lifted */ .sheet:hover{transform:scale(1.015);position:relative;z-index:2} @media(prefers-reduced-motion:reduce){.sheet:hover{transform:none}} .sbody{display:grid;gap:11px;align-content:center} .stop-row{display:flex;justify-content:space-between;align-items:baseline;gap:14px} .stop-row .num{color:var(--ink-26);font-size:13px} .sheet:hover .stop-row .num{color:var(--spot)} .sbody h3{margin:0;font-size:clamp(23px,2.6vw,32px);font-weight:300;letter-spacing:-.024em;line-height:1.1} .sheet:hover h3{color:var(--spot)} .sbody p{margin:0;color:var(--ink-70);font-size:17px;line-height:1.47;max-width:42ch} .sfacts{display:flex;gap:16px;align-items:baseline;flex-wrap:wrap; border-top:1px solid var(--rule-soft);padding-top:11px;margin-top:2px} .sgo{color:var(--ink-38);transition:color .18s} .sgo i{font-style:normal;display:inline-block;transition:transform .22s} .sheet:hover .sgo{color:var(--spot)} .sheet:hover .sgo i{transform:translateX(5px)} .sheet .holder{ border:1px solid var(--panel-edge);padding:8px;background:var(--panel);box-shadow:var(--panel-lift); transition:border-color .2s;position:relative; } .sheet:hover .holder{border-color:var(--spot)} @media(max-width:880px){ .sheet{grid-template-columns:1fr;gap:18px;padding:28px 0} .sbody{order:2} } /* --- clients: slides travelling past on a belt --------------------------- */ /* No panel behind the belt — the slides travel over the graph paper itself, which is the whole point of their being glass. */ .stagebed{ position:relative;padding:0; border-top:1px solid var(--rule);border-bottom:1px solid var(--rule); } /* the mask both clips the belt and fades it out at each end, so slides arrive and leave rather than being cut off by an edge */ .railmask{ overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent); mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent); } /* Each slide carries its own right margin rather than the track using `gap`. That makes the track exactly two equal sets wide, so translating half of it lands the duplicate precisely where the original started. With `gap` the final gap is missing and the loop jumps a few pixels every pass. */ .rail{ list-style:none;margin:0;padding:34px 0 38px; display:flex;width:max-content; animation:railtravel 27s linear infinite; } /* travelling exactly 100/sets of the track puts the duplicate where the original began, so the restart is invisible */ @keyframes railtravel{ from{transform:translate3d(0,0,0)} to{transform:translate3d(calc(-100% / var(--sets,2)),0,0)} } .railmask:hover .rail,.rail:focus-within{animation-play-state:paused} @media(prefers-reduced-motion:reduce){ .rail{animation:none} .railmask{overflow-x:auto;scrollbar-width:none} .railmask::-webkit-scrollbar{display:none} } /* a slide is 75 x 25 mm — so 3:1, frosted end at the left */ /* narrower slide, tighter spacing — the belt reads as a run of marks, not a parade of empty glass */ .slide{ flex:0 0 176px;margin-right:14px;position:relative; transition:transform .34s cubic-bezier(.2,.9,.25,1),filter .34s; transform-origin:center bottom;cursor:pointer;outline:none; } /* The glass is glass: the paper reads straight through it. Only the faintest green cast and the inner bevel remain, so it still catches light without sitting on a white ground. */ /* squarer than a real 3:1 slide, and a thinner sheet of glass — hairline edge, 2px bevel */ .slide .glass{ display:grid;grid-template-columns:28px 1fr;aspect-ratio:3/2; border:1px solid rgba(23,23,26,.24); background:linear-gradient(146deg,rgba(203,224,218,.20),rgba(232,240,234,.10) 42%,rgba(198,220,216,.20)); box-shadow:inset 0 0 0 2px rgba(255,255,255,.18),0 1px 2px rgba(23,23,26,.06); overflow:hidden;position:relative; } /* light travelling across the glass */ .slide .glass::after{ content:"";position:absolute;inset:0;pointer-events:none; background:linear-gradient(114deg,transparent 30%,rgba(255,255,255,.55) 44%,transparent 58%); transform:translateX(-16%);transition:transform .6s ease; } .slide:hover .glass::after,.slide:focus-visible .glass::after{transform:translateX(26%)} /* the frosted end stays frosted, but as a tint rather than an opaque white */ .slide .frost{ border-right:1px solid rgba(23,23,26,.22); background:repeating-linear-gradient(96deg,rgba(255,255,255,.34),rgba(255,255,255,.34) 2px,rgba(214,226,216,.30) 2px,rgba(214,226,216,.30) 4px); display:grid;place-items:center; } /* the label reads bottom-up, wrapped around the slide's end */ .specno{ font-family:'Architects Daughter',cursive;font-size:11.5px;color:#2b3a4a; writing-mode:vertical-rl;transform:rotate(180deg); letter-spacing:.07em;white-space:nowrap; } .slide .logo{display:grid;place-items:center;padding:0 14px} /* A supplied mark sits in the same cell the typeset name would. Marks arrive at wildly different proportions, so it is fitted by height and never cropped. */ .slide .logo.hasmark{padding:0 13px} .slide .logo img{ max-width:100%;max-height:64px;width:auto;height:auto;object-fit:contain;display:block; opacity:.78;transition:opacity .25s,transform .3s cubic-bezier(.2,.9,.25,1); } /* Squarish marks read optically small next to wide wordmarks at one shared height, so they get taller steps. The glass is ~117px tall at full slide width; xl runs nearly edge to edge. */ .slide .logo img.lg{max-height:88px} .slide .logo img.xl{max-height:100px} /* marks whose source is tightly cropped read calmer a step smaller */ .slide .logo img.sm{max-height:46px} .slide:hover .logo img,.slide:focus-visible .logo img{opacity:1} .slide .logo span{ font-family:var(--hand-tech);font-weight:400; font-size:18px;letter-spacing:.06em;text-transform:uppercase;text-align:center; -webkit-text-stroke:.4px currentColor;paint-order:stroke fill; color:rgba(23,23,26,.72);line-height:1.25; transition:color .25s,letter-spacing .3s; } .slide:hover,.slide:focus-visible{transform:scale(1.16) translateY(-8px);z-index:3} .slide:hover .logo span,.slide:focus-visible .logo span{color:var(--ink);letter-spacing:.13em} .slide:hover .glass,.slide:focus-visible .glass{ box-shadow:inset 0 0 0 3px rgba(255,255,255,.55),0 14px 30px rgba(23,23,26,.18); } @media(max-width:640px){.slide{flex-basis:196px}} @media(prefers-reduced-motion:reduce){ .slide,.slide .lens,.slide .glass::after{transition:none} } /* ========================================================================== STAMPS · the press register as a stamped folder ========================================================================== */ /* Draft Paper leads every stack below. Drop the .woff2 into site/fonts/ and uncomment the @font-face and it takes over everywhere, no other edits. */ .stamp-art{width:100%;height:auto;display:block;mix-blend-mode:multiply} /* the folder cover */ .folder{ border:1px solid var(--panel-edge);border-top:2px solid var(--ink); padding:22px 24px;background:var(--panel);box-shadow:var(--panel-lift);position:relative; } .folder::after{ content:"";position:absolute;top:14px;right:16px;width:11px;height:11px; border-radius:50%;background:var(--ink);opacity:.5; } .fcols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px} @media(max-width:760px){.fcols{grid-template-columns:1fr 1fr}} .ffield{display:grid;gap:5px;border-left:1px solid var(--rule);padding-left:12px} .ffield:first-child{border-left:0;padding-left:0} .hand{ font-family:'Architects Daughter',cursive;font-size:20px;line-height:1.15;color:var(--ink); } .fkey{ display:flex;gap:22px;flex-wrap:wrap;margin-top:18px;padding-top:14px; border-top:1px solid var(--rule); } .fkey .tag{display:flex;align-items:center;gap:7px} .sw{width:11px;height:11px;display:inline-block;border:2px solid currentColor} .sw.ex{border-radius:50%;color:#a8371f} .sw.pu{color:#2f4763} .sw.re{color:#a8371f;transform:rotate(45deg)} /* the register */ .records{list-style:none;margin:0;padding:0;display:grid;gap:16px} .record{ display:grid;grid-template-columns:1fr 190px;gap:20px;align-items:center; border:1px solid var(--panel-edge);padding:19px 21px; background:var(--panel);box-shadow:var(--panel-lift);position:relative;overflow:hidden; transition:border-color .2s,background .2s; } .record:hover{border-color:var(--ink-38);background:#fff} .rbody{display:grid;gap:11px} .rfield{display:grid;gap:3px} .rval{font-size:22px;letter-spacing:-.014em;line-height:1.22} .rval.sm{font-size:16px;letter-spacing:0;color:var(--ink-70)} .rrow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px; border-top:1px solid var(--rule-soft);padding-top:11px} .rstamp{display:grid;place-items:center} /* every impression lands at a slightly different angle, as they do */ .record .rstamp{transform:rotate(-6deg)} .record:nth-child(2n) .rstamp{transform:rotate(4.5deg)} .record:nth-child(3n) .rstamp{transform:rotate(-2deg)} .record:nth-child(5n) .rstamp{transform:rotate(7deg)} .record .rstamp{transition:transform .4s cubic-bezier(.2,.9,.3,1)} .record:hover .rstamp{transform:rotate(0deg) scale(1.05)} .k-published .stamp-art{max-width:200px} .k-exhibited .stamp-art,.k-recognition .stamp-art{max-width:164px} @media(max-width:700px){ .record{grid-template-columns:1fr;gap:14px} .rstamp{justify-items:start} .record .rstamp,.record:nth-child(2n) .rstamp, .record:nth-child(3n) .rstamp,.record:nth-child(5n) .rstamp{transform:rotate(-4deg)} .rrow{grid-template-columns:1fr 1fr} } /* status stamp, whacked on the corner of a project sheet */ .proj-head{position:relative} .statusstamp{ position:absolute;top:10px;right:4px;width:182px; transform:rotate(-8deg);pointer-events:none; } @media(max-width:1000px){.statusstamp{display:none}} /* stamp faces use the technical hand */ /* Draft Paper's figures are ambiguous in a numeric run — 1-1 reads as H, 0 as O — so anything that is purely a number stays in the mono. */ .stamp-art text{font-family:var(--hand-tech)} .titleblock b,.tag .data,.fkey .data{font-family:'Courier Prime',ui-monospace,Courier,monospace;font-size:.92em;letter-spacing:.02em} /* --- press key box ------------------------------------------------------- */ /* the head every panel shares — label, dimension line, count */ .cardhead{ display:flex;align-items:center;gap:14px; padding-bottom:12px;margin-bottom:18px;border-bottom:1px solid var(--ink); } .cardhead .dimline{ flex:1;height:7px;position:relative; border-left:1px solid var(--ink-38);border-right:1px solid var(--ink-38); } .cardhead .dimline::after{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:var(--ink-26)} .cardhead .data{font-size:13px} .folder .fhead{ display:flex;align-items:center;gap:14px; padding-bottom:12px;margin-bottom:16px;border-bottom:1px solid var(--ink); } .folder .fhead .dimline{ flex:1;height:7px;position:relative; border-left:1px solid var(--ink-38);border-right:1px solid var(--ink-38); } .folder .fhead .dimline::after{ content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:var(--ink-26); } .folder .fhead .data{font-size:14px} .fkey .kitem{display:flex;align-items:center;gap:9px} .minidie{width:22px;height:22px;flex:none;mix-blend-mode:multiply;opacity:.9} /* ========================================================================== PERFORATION · BLIND EMBOSS · TELEGRAM · RESTRICTED · THE STAIN ========================================================================== */ /* --- perforation: holes actually punched out of the element -------------- */ .perf{ --pitch:13px; --hole:3.7px; -webkit-mask-image: radial-gradient(circle var(--hole) at 50% 0, #0000 97%, #000 100%), radial-gradient(circle var(--hole) at 50% 100%,#0000 97%, #000 100%); mask-image: radial-gradient(circle var(--hole) at 50% 0, #0000 97%, #000 100%), radial-gradient(circle var(--hole) at 50% 100%,#0000 97%, #000 100%); -webkit-mask-size:var(--pitch) 100%,var(--pitch) 100%; mask-size:var(--pitch) 100%,var(--pitch) 100%; -webkit-mask-repeat:repeat-x; mask-repeat:repeat-x; -webkit-mask-composite:source-in; mask-composite:intersect; } /* a tear guide, for section boundaries */ .tearline{ height:1px;margin:44px 0;position:relative; background:repeating-linear-gradient(90deg,var(--ink-26) 0 6px,transparent 6px 13px); } .tearline::before{ content:attr(data-tear);position:absolute;left:0;top:-16px;background:var(--paper); padding-right:12px;font-family:var(--hand-tech);font-size:11px; letter-spacing:.18em;text-transform:uppercase;color:var(--ink-26); } /* --- blind emboss: pressed into the sheet, no ink ------------------------ */ /* --- the message form --------------------------------------------------- Keeps the telegram's structure — fielded card, uppercase wire type, STOP, a live word count — and drops everything that was only period-costume. */ :root{ --pen:#1f3f8f; --tred:#a8371f; } /* ballpoint blue, and the site's own red */ .telegram{ background:var(--panel);border:1px solid var(--panel-edge); box-shadow:var(--panel-lift);padding:24px 28px 28px;position:relative; } .tgm-head{ display:flex;align-items:baseline;justify-content:space-between;gap:20px; flex-wrap:wrap;padding-bottom:14px;margin-bottom:20px; border-bottom:1px solid var(--rule); } /* (The masthead was a struck-through TELEGRAM with a handwritten "Contact" correction — cut at Bella's request, Aug 2026. That was the one use of the Nothing You Could Do correction voice; the font stays loaded in case the device returns somewhere else.) */ .tgm-mast{position:relative;display:inline-block;padding:8px 34px 8px 0} /* both sides of the masthead are set in Bella's own Draft Paper */ .tgm-word{ display:block; font-family:var(--hand-tech);font-weight:400; font-size:clamp(30px,4.6vw,50px);letter-spacing:.12em;color:var(--ink);line-height:1; -webkit-text-stroke:.5px currentColor;paint-order:stroke fill; } .tgm-svc{ font-family:var(--hand-tech);font-size:24px;text-transform:uppercase; letter-spacing:.14em;color:var(--ink);line-height:1; -webkit-text-stroke:.4px currentColor;paint-order:stroke fill; } .tgm-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border:1px solid var(--rule)} .tcell{padding:11px 14px;border-right:1px solid var(--rule)} .tcell:last-child{border-right:0} @media(max-width:720px){ .tgm-grid{grid-template-columns:1fr 1fr} .tcell:nth-child(2n){border-right:0} .tcell:nth-child(-n+2){border-bottom:1px solid var(--rule)} } .tlab{ display:block;font-family:var(--hand-tech);font-size:11.5px; letter-spacing:.10em;text-transform:uppercase;color:rgba(23,23,26,.88);margin-bottom:4px; -webkit-text-stroke:.3px currentColor;paint-order:stroke fill; } .tval{font-family:'Courier Prime',Courier,monospace;font-size:14.5px;color:#22242a;letter-spacing:.04em} .tval b{font-weight:500;color:#22242a} .tgm-body{ margin-top:22px; background:repeating-linear-gradient(180deg,transparent 0 35px,var(--rule-soft) 35px 36px); } .tline{ margin:0;font-family:'Courier Prime',Courier,monospace;font-size:16.5px; letter-spacing:.15em;color:#2b2b30;line-height:36px;text-transform:uppercase; } .tstop{color:var(--ink-38)} .tgm-count{display:flex;align-items:center;gap:14px;margin-top:14px} .tgm-count .dimline{ flex:1;height:7px;position:relative; border-left:1px solid var(--ink-38);border-right:1px solid var(--ink-38); } .tgm-count .dimline::after{ content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:var(--ink-26); } .tgm-count .tlab{margin:0} /* where to actually reach her */ .tgm-reach{ display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0; margin-top:24px;border-top:1px solid var(--ink); } @media(max-width:620px){.tgm-reach{grid-template-columns:1fr}} .slink{ display:flex;flex-direction:column;gap:4px;padding:14px 16px;text-decoration:none; border-bottom:1px solid var(--rule-soft);border-right:1px solid var(--rule-soft); transition:background .16s; } .slink:nth-child(2n){border-right:0} .slink:hover{background:var(--spot-tint)} .slink .tag{color:rgba(23,23,26,.88)} .shandle{font-family:'Courier Prime',Courier,monospace;font-size:16px;color:#22242a;letter-spacing:.03em} .slink:hover .shandle{color:var(--tred)} .slink-mail .shandle{font-size:14px} .tgm-foot{ margin:22px 0 0;font-family:var(--hand-tech); font-size:11.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-38); } /* --- the restricted sheet ------------------------------------------------ */ .sheet.restricted{opacity:1} .redact{ background:var(--ink);color:transparent;user-select:none; padding:0 .18em;border-radius:1px; box-shadow:0 0 0 2px var(--ink); } .lockplate{ display:grid;grid-template-columns:230px 1fr;gap:30px;align-items:center; border:1px solid var(--panel-edge);padding:26px;background:var(--panel);box-shadow:var(--panel-lift); } @media(max-width:760px){.lockplate{grid-template-columns:1fr;gap:18px}} .lockstamp{transform:rotate(-5deg)} .lockform{display:grid;gap:10px;max-width:420px} .lockform input{ font:inherit;font-size:16px;padding:11px 13px;border:1px solid var(--ink-26); background:rgba(255,255,255,.6);color:var(--ink); } .lockform input:focus{outline:2px solid var(--spot);outline-offset:2px} /* the submit is a .btn.primary die; it only needs placing and its font reset */ .lockform button{justify-self:start;font:inherit} .lockmsg{margin:0;min-height:16px;color:var(--spot)} .lockopened p{margin:0 0 16px;font-size:18px;max-width:52ch} /* --- the stain: one page, one ring --------------------------------------- */ .ring{ position:absolute;top:-18px;right:-24px;width:250px;height:250px; pointer-events:none;z-index:0;mix-blend-mode:multiply;opacity:.72; } .ring svg{width:100%;height:100%} @media(max-width:900px){.ring{width:170px;height:170px;right:-14px;top:-10px}} /* Draft Paper has no arrows or bullets; hand those back to Archivo. */ .tag i,.sgo i,.btn i,.lockform button i,.creveal i{ font-family:'Archivo',Helvetica,sans-serif;font-style:normal; } /* --- info: an identification record, not a biography --------------------- */ .idcard{ display:grid;grid-template-columns:300px 1fr;gap:34px; border:1px solid var(--panel-edge);border-top:0; background:var(--panel);padding:28px 30px 30px; } @media(max-width:820px){.idcard{grid-template-columns:1fr;gap:22px;padding:22px}} .idportrait{display:grid;gap:9px;align-content:start} /* the portrait under the client slides' glass — same edge, tint, bevel, and frosted end, stood upright */ .pslide{ display:grid;grid-template-columns:28px 1fr; border:1px solid rgba(23,23,26,.24); background:linear-gradient(146deg,rgba(203,224,218,.20),rgba(232,240,234,.10) 42%,rgba(198,220,216,.20)); box-shadow:inset 0 0 0 2px rgba(255,255,255,.18),0 1px 2px rgba(23,23,26,.06); overflow:hidden;position:relative; } .pslide .frost{ border-right:1px solid rgba(23,23,26,.22); background:repeating-linear-gradient(96deg,rgba(255,255,255,.34),rgba(255,255,255,.34) 2px,rgba(214,226,216,.30) 2px,rgba(214,226,216,.30) 4px); display:grid;place-items:center; } .pslide .ph{aspect-ratio:4/5} /* the real photograph, cropped to the same plate and held to the site's monochrome treatment */ .pslide .pimg{width:100%;aspect-ratio:4/5;object-fit:cover;display:block;filter:grayscale(1)} /* the same light sweep the client slides carry */ .pslide::after{ content:"";position:absolute;inset:0;pointer-events:none; background:linear-gradient(114deg,transparent 30%,rgba(255,255,255,.55) 44%,transparent 58%); transform:translateX(-20%);transition:transform .7s ease; } .pslide:hover::after{transform:translateX(30%)} .idhead{display:flex;align-items:center;gap:14px;padding-bottom:12px;margin-bottom:16px;border-bottom:1px solid var(--ink)} .idhead .dimline{ flex:1;height:7px;position:relative; border-left:1px solid var(--ink-38);border-right:1px solid var(--ink-38); } .idhead .dimline::after{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:var(--ink-26)} .idfields{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--rule)} @media(max-width:620px){.idfields{grid-template-columns:1fr}} .idrow{ display:grid;gap:3px;padding:11px 14px; border-right:1px solid var(--rule-soft);border-bottom:1px solid var(--rule-soft); } .idrow:nth-child(2n){border-right:0} .idrow:nth-last-child(-n+2){border-bottom:0} .idval{font-size:16.5px;line-height:1.3} /* the bio row spans both grid columns, under the portrait — and overrides the .prose measure cap so the text actually runs the width */ .idwide{grid-column:1/-1;padding-top:8px} .idnote{margin-top:0;max-width:none} .idnote p{margin:0 0 14px;font-size:17.5px;line-height:1.55} .idnote p:last-child{margin-bottom:0} .idnote p:first-child{font-size:19.5px;line-height:1.4} /* ========================================================================== HOME MASTHEAD · TICKET BUTTONS · RULED PRESS RECORDS ========================================================================== */ /* --- the masthead: her name first, attached to the tab ------------------- */ .masthead{ border:1px solid var(--panel-edge);border-top:0; background:var(--panel);padding:36px 34px 32px; } @media(max-width:760px){.masthead{padding:26px 22px}} .mh-top{display:flex;align-items:baseline;gap:20px;flex-wrap:wrap} /* the name is set in Bella's own Draft Paper, with the optical stroke that keeps the monoline solid at display size */ .masthead h1{ margin:0;font-size:clamp(40px,6.8vw,80px);line-height:1; font-family:var(--hand-tech);font-weight:400;letter-spacing:.04em; -webkit-text-stroke:.7px currentColor;paint-order:stroke fill; } .mh-role{color:var(--ink-70);font-size:17px} .mh-line{ margin:22px 0 0;font-size:clamp(26px,3.4vw,42px);line-height:1.18; font-weight:300;letter-spacing:-.02em;max-width:26ch; } .mh-line em{font-style:italic;color:var(--spot)} .mh-fields{ display:grid;grid-template-columns:repeat(3,minmax(0,1fr)); border-top:1px solid var(--ink);margin-top:30px; } @media(max-width:820px){.mh-fields{grid-template-columns:1fr}} .mh-fields > div{ padding:14px 18px 4px 0;border-right:1px solid var(--rule); display:grid;gap:6px;align-content:start; } .mh-fields > div + div{padding-left:18px} .mh-fields > div:last-child{border-right:0} .mhval{font-size:16.5px;line-height:1.35;color:var(--ink-70)} @media(max-width:820px){ .mh-fields > div{border-right:0;border-bottom:1px solid var(--rule-soft);padding:12px 0} .mh-fields > div + div{padding-left:0} .mh-fields > div:last-child{border-bottom:0} } /* (A "tear-off ticket" button treatment lived here and silently overrode the button block above — the file's one exception to its own single-definition rule. Removed when the stamp die became the button; see --- stamp buttons.) */ /* --- press records, ruled like the telegram ------------------------------ */ .rbody.ruled{gap:0} .rbody.ruled .rfield{ padding:9px 0 8px;border-bottom:1px solid var(--rule-soft); grid-template-columns:150px 1fr;display:grid;align-items:baseline;gap:16px; } .rbody.ruled .rfield .tag{padding-top:2px} .rbody.ruled .rrow{ display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0; border-top:0;padding-top:0; } .rbody.ruled .rrow .rfield{ display:grid;grid-template-columns:1fr;gap:3px;border-bottom:0; padding:11px 14px 2px 0; } .rbody.ruled .rrow .rfield + .rfield{padding-left:14px;border-left:1px solid var(--rule-soft)} @media(max-width:820px){ .rbody.ruled .rfield{grid-template-columns:1fr;gap:2px} .rbody.ruled .rrow{grid-template-columns:1fr 1fr} .rbody.ruled .rrow .rfield + .rfield{padding-left:0;border-left:0} } /* --- press: the link to the piece itself --------------------------------- */ .rlink{ display:flex;align-items:baseline;gap:14px;text-decoration:none; margin-top:12px;padding:11px 0 2px;border-top:1px solid var(--rule); transition:padding .18s; } .rlink .rurl{color:var(--ink-70);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .rlink i{font-style:normal;margin-left:auto;color:var(--ink-38);transition:transform .2s,color .18s} a.rlink:hover{padding-left:8px} a.rlink:hover .tag,a.rlink:hover .rurl{color:var(--spot)} a.rlink:hover i{transform:translateX(5px);color:var(--spot)} .rlink.empty .tag,.rlink.empty .data{color:var(--ink-38)} .fkey .klinks{margin-left:auto} @media(max-width:820px){.fkey .klinks{margin-left:0}} /* ========================================================================== PERFORATION RELIEF — treatment B (chosen Aug 2026) A punched sheet is physical: it casts a shadow that follows its holes, and each hole carries a faint pressed rim. The shadow cannot come from box-shadow (a mask clips it square) or from filter on the masked element itself (filters apply before masking) — so `.relief` lives on a WRAPPER, where drop-shadow traces the masked silhouette. The rims are extra background layers pinned to the same pitch as the mask; this rule sits at the end of the file so it wins over each element's `background` shorthand. ========================================================================== */ .relief{filter:drop-shadow(0 1.5px 1px rgba(23,23,26,.14)) drop-shadow(0 6px 14px rgba(23,23,26,.07))} .perf{ background-image: radial-gradient(circle 5.5px at 50% 0, rgba(23,23,26,.15),rgba(23,23,26,0) 78%), radial-gradient(circle 5.5px at 50% 100%,rgba(23,23,26,.15),rgba(23,23,26,0) 78%); background-size:var(--pitch,13px) 100%,var(--pitch,13px) 100%; background-repeat:repeat-x,repeat-x; background-position:0 0,0 100%; background-color:var(--panel); }