/* Self-hosted webfonts. No request leaves the visitor's browser for a third party. */ /* greek-ext */ /* One rule per family, style and subset. The woff2 files are variable (Literata wght 400-900, Inter 100-900) and the per-weight files are byte identical, so naming a weight range here serves every weight the site uses from one download instead of one per weight. Do not split these back out: it costs 131 KB a page and changes nothing on screen. */ @font-face {font-family: 'Inter';font-style: normal;font-weight: 100 900;font-display: swap;src: url(/assets/fonts/inter-normal-400-greek-ext.woff2) format('woff2');unicode-range: U+1F00-1FFF;} @font-face {font-family: 'Inter';font-style: normal;font-weight: 100 900;font-display: swap;src: url(/assets/fonts/inter-normal-400-greek.woff2) format('woff2');unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;} @font-face {font-family: 'Inter';font-style: normal;font-weight: 100 900;font-display: swap;src: url(/assets/fonts/inter-normal-400-latin-ext.woff2) format('woff2');unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;} @font-face {font-family: 'Inter';font-style: normal;font-weight: 100 900;font-display: swap;src: url(/assets/fonts/inter-normal-400-latin.woff2) format('woff2');unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;} @font-face {font-family: 'Literata';font-style: italic;font-weight: 400 900;font-display: swap;src: url(/assets/fonts/literata-italic-400-greek-ext.woff2) format('woff2');unicode-range: U+1F00-1FFF;} @font-face {font-family: 'Literata';font-style: italic;font-weight: 400 900;font-display: swap;src: url(/assets/fonts/literata-italic-400-greek.woff2) format('woff2');unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;} @font-face {font-family: 'Literata';font-style: italic;font-weight: 400 900;font-display: swap;src: url(/assets/fonts/literata-italic-400-latin-ext.woff2) format('woff2');unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;} @font-face {font-family: 'Literata';font-style: italic;font-weight: 400 900;font-display: swap;src: url(/assets/fonts/literata-italic-400-latin.woff2) format('woff2');unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;} @font-face {font-family: 'Literata';font-style: normal;font-weight: 400 900;font-display: swap;src: url(/assets/fonts/literata-normal-400-greek-ext.woff2) format('woff2');unicode-range: U+1F00-1FFF;} @font-face {font-family: 'Literata';font-style: normal;font-weight: 400 900;font-display: swap;src: url(/assets/fonts/literata-normal-400-greek.woff2) format('woff2');unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;} @font-face {font-family: 'Literata';font-style: normal;font-weight: 400 900;font-display: swap;src: url(/assets/fonts/literata-normal-400-latin-ext.woff2) format('woff2');unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;} @font-face {font-family: 'Literata';font-style: normal;font-weight: 400 900;font-display: swap;src: url(/assets/fonts/literata-normal-400-latin.woff2) format('woff2');unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;} /* The language switch is the only Greek on an English page, and rendering two words in the brand face pulled two whole Greek subsets, 51 KB, onto every one of the 189 English pages whose prose has no Greek in it. The labels take the device's own UI face instead. Greek letters that appear inside English prose, the statutory 65B and 44IH, carry no lang attribute and are unaffected: on those 56 pages the subset still loads, correctly. */ html[lang="en"] [lang="el"]{font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif} :root{--s6:clamp(48px,4.4vw,72px);--s7:clamp(64px,6vw,96px);--s8:clamp(88px,8vw,128px); --hero1:#1A1816; --hero2:#0D0C0B; --paper:#FAFAF9; --paper2:#F2F1EF; --ink:#1A1817; --body:#423D39; --mute:#6E6862; --line:rgba(26,24,23,.14); --hair:rgba(26,24,23,.08); --accent:#8C4F30; --accent-lt:#D4967D; --onDark:#F2F3F4; --onDarkMute:rgba(242,243,244,.6); --onDarkLine:rgba(242,243,244,.14); --serif:"Literata",Georgia,serif; --sans:"Inter",system-ui,sans-serif; --w:1220px; --gut:clamp(24px,5vw,64px); --r:4px; color-scheme:light; } *,*::before,*::after{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0;background:linear-gradient(180deg,var(--hero1),var(--hero2)) fixed; color:var(--body);font-family:var(--sans);font-size:17px;line-height:1.8; -webkit-font-smoothing:antialiased} .wrap{max-width:var(--w);margin:0 auto;padding:0 var(--gut)} a{color:inherit} p{margin:0 0 20px;max-width:64ch} ::selection{background:var(--accent-lt);color:var(--ink)} #plan{position:fixed;inset:0;width:100vw;height:100vh;z-index:0;pointer-events:none;display:block} a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px} .label{font-family:var(--sans);font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:.24em; color:var(--accent);margin:0 0 20px;display:flex;gap:14px;align-items:center} .label i{width:28px;height:1px;background:currentColor;flex:none} .top{position:relative;z-index:1;color:var(--onDark)} .top::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none; background:radial-gradient(120% 130% at 20% 34%,rgba(13,12,11,.88),rgba(13,12,11,.40) 62%,transparent)} .top .label{color:var(--accent-lt)} .top a:focus-visible,.drawer a:focus-visible,.burger:focus-visible{outline-color:var(--accent-lt)} .nav{display:flex;align-items:center;justify-content:space-between;height:84px; border-bottom:1px solid var(--onDarkLine)} .mark{display:flex;align-items:center;margin-right:40px;font-family:var(--serif);font-size:19px;text-decoration:none;color:var(--onDark)} .nav ul{display:flex;gap:20px;list-style:none;margin:0;padding:0} .nav ul a{font-size:12px;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;white-space:nowrap;color:rgba(242,243,244,.92)} .nav ul a:hover{color:var(--onDark)} .nav ul a[aria-current="page"]{color:var(--accent-lt)} .navcta{margin-left:14px;font-size:12px;font-weight:500;text-transform:uppercase;letter-spacing:.1em; text-decoration:none;color:var(--onDark);border:1px solid var(--onDarkLine); padding:12px 20px;border-radius:var(--r);white-space:nowrap} .navcta:hover{border-color:var(--accent-lt);color:var(--accent-lt)} .burger{display:none;background:none;border:1px solid var(--onDarkLine);border-radius:var(--r); width:46px;height:40px;position:relative;cursor:pointer} .burger span{position:absolute;left:11px;right:11px;height:1px;background:var(--onDark); transition:transform .22s,top .22s,bottom .22s} .burger span:nth-child(1){top:15px} .burger span:nth-child(2){bottom:15px} .burger[aria-expanded="true"] span:nth-child(1){top:20px;transform:rotate(45deg)} .burger[aria-expanded="true"] span:nth-child(2){bottom:20px;transform:rotate(-45deg)} .drawer{position:fixed;inset:0;z-index:80;background:var(--hero2); padding:96px var(--gut) 40px;display:flex;flex-direction:column; transform:translateX(100%);visibility:hidden;transition:transform .3s,visibility .3s; overflow-y:auto} .drawer[data-open="true"]{transform:none;visibility:visible} .drawer a{font-family:var(--serif);font-size:clamp(24px,6.4vw,38px);color:var(--onDark); text-decoration:none;padding:15px 0;border-bottom:1px solid var(--onDarkLine)} .drawer a:last-of-type{border-bottom:0} .drawer .close{position:absolute;top:26px;right:var(--gut);background:none;border:0; color:var(--onDarkMute);font-size:12px;letter-spacing:.16em;text-transform:uppercase;cursor:pointer} .drawer .close::after{content:"";position:absolute;inset:-14px -12px} @media(max-width:1023px){.nav ul{display:none}.navcta{display:none}.burger{display:block}} @media(min-width:1024px){.drawer{display:none}} .masthead{padding-top:var(--s8);padding-bottom:var(--s6)} .masthead h1{font-family:var(--serif);font-weight:400;color:var(--onDark); font-size:clamp(40px,5.4vw,64px);line-height:1.06;letter-spacing:-.018em;margin:0 0 28px;max-width:14ch} .masthead .stand{font-family:var(--serif);font-style:normal;color:rgba(242,243,244,.78);font-size:clamp(18px,2vw,25px);line-height:1.45;max-width:46ch;margin:0;border-left:2px solid var(--accent);padding-left:24px} .sub-nav{display:flex;flex-wrap:wrap;gap:6px 26px;padding:24px 0 0;border-top:1px solid var(--onDarkLine); margin-top:36px} .sub-nav a{font-size:14px;text-decoration:none;color:var(--onDarkMute);padding:8px 0;border-bottom:1px solid transparent} .sub-nav a:hover{color:var(--onDark);border-bottom-color:var(--onDarkLine)} .sub-nav a[aria-current="page"]{color:var(--onDark);border-bottom-color:var(--accent-lt)} .sheet{position:relative;z-index:1;background:var(--paper)} section{padding:var(--s7) 0} /* A landing page that puts the firm, the practice, the team, the tools and the writing at one visual weight reads as a library with a law firm in it. .major widens the gap around the sections that carry the proposition; .knowledge drops the tools and the writing onto a full-bleed tonal band with a smaller heading, so they read as the third thing on the page rather than the first. Nothing is removed: only the order of attention changes. */ .major{padding-top:var(--s8);padding-bottom:var(--s8)} .knowledge{background:var(--paper2);padding:var(--s8) 0; margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw); padding-left:max(var(--gut),calc(50vw - var(--w)/2 + var(--gut))); padding-right:max(var(--gut),calc(50vw - var(--w)/2 + var(--gut)))} .knowledge + .knowledge{padding-top:0} .knowledge h2.big{font-size:clamp(24px,2.3vw,31px);max-width:34ch} .knowledge .label{opacity:.85} .two{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1fr); gap:clamp(26px,6vw,88px);align-items:start} @media(max-width:900px){.two{grid-template-columns:1fr}} /* The left column held a heading and then a column of nothing. It now travels with the text it introduces, which is what the empty space was for. */ @media(min-width:901px){ .two > div:first-child{position:sticky;top:36px;align-self:start} } h2.big{font-family:var(--serif);font-weight:400;color:var(--ink); font-size:clamp(30px,3.4vw,45px);line-height:1.12;letter-spacing:-.010em;margin:0;max-width:28ch} h3.mid{font-family:var(--serif);font-weight:400;color:var(--ink); font-size:clamp(21px,1.9vw,26px);line-height:1.22;letter-spacing:-.005em;margin:0 0 16px} .send{border-left:2px solid var(--accent);padding:4px 0 4px clamp(18px,2.6vw,30px); margin-top:34px;background:none} .send p:last-child{margin-bottom:0} .send .h{font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:.2em; color:var(--accent);margin:0 0 10px} .bullets{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)} .bullets li{padding:15px 0 15px 28px;border-bottom:1px solid var(--hair);position:relative; max-width:66ch} .bullets li::before{content:"";position:absolute;left:2px;top:29px;width:9px;height:1px; background:var(--accent)} .nots li::before{background:var(--mute)} .route{border-top:1px solid var(--line);margin-top:8px} .step{display:grid;grid-template-columns:52px 1fr;gap:clamp(14px,3vw,34px); padding:20px 0;border-bottom:1px solid var(--hair);align-items:baseline} .step .no{font-family:var(--serif);font-size:14px;color:var(--accent)} .step p{margin:0;max-width:64ch} @media(max-width:600px){.step{grid-template-columns:34px 1fr;gap:12px}} details{border-bottom:1px solid var(--hair)} details summary{cursor:pointer;list-style:none;padding:18px 34px 18px 0;position:relative; font-family:var(--serif);font-size:clamp(17px,1.7vw,20px);color:var(--ink);line-height:1.35} details summary::-webkit-details-marker{display:none} details summary::after{content:"+";position:absolute;right:4px;top:17px;color:var(--accent); font-family:var(--sans);font-size:20px;line-height:1} details[open] summary::after{content:"−"} details .a{padding:0 0 20px} details .a p:last-child{margin-bottom:0} .leads{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,64px);margin-top:8px} .leads.stack{grid-template-columns:1fr;gap:22px;margin-top:4px} @media(max-width:820px){.leads{grid-template-columns:1fr}} .lead{display:flex;gap:20px;align-items:flex-start} .lead img{width:84px;height:112px;object-fit:cover;object-position:50% 20%; border-radius:var(--r);flex:none;background:var(--paper2)} .lead h4,.lead h3.h4,.lead h2.h4{font-family:var(--serif);font-weight:400;font-size:21px;color:var(--ink);margin:0 0 2px} .lead .role{font-size:10.5px;font-weight:500;text-transform:uppercase;letter-spacing:.18em; color:var(--mute);margin:0 0 10px} .lead p{margin:0;font-size:15.5px;max-width:40ch} .reading{border-top:1px solid var(--line)} .art{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;align-items:baseline; padding:20px 0;border-bottom:1px solid var(--hair);text-decoration:none} .art:hover h4,.art:hover h3.h4,.art:hover h2.h4{color:var(--accent)} .art h4,.art h3.h4,.art h2.h4{font-family:var(--serif);font-weight:400;color:var(--ink);font-size:clamp(18px,1.5vw,21px); line-height:1.3;margin:0;transition:color .2s} .art span{font-size:10.5px;font-weight:500;text-transform:uppercase;letter-spacing:.16em; color:var(--mute);white-space:nowrap} .art > div{min-width:0} .art .no{font-family:var(--serif);color:var(--accent);font-size:14px;letter-spacing:0; text-transform:none;font-weight:400;padding-top:5px} .art .d{font-size:15px;color:var(--body);margin:7px 0 0;line-height:1.6;max-width:70ch; white-space:normal;text-transform:none;letter-spacing:0;font-weight:400} .art h4 a,.art h3.h4 a,.art h2.h4 a{color:inherit;text-decoration:none;transition:color .2s} .art:hover h4 a,.art:hover h3.h4 a,.art:hover h2.h4 a{color:var(--accent)} .art .areas{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:14px} .arearow{grid-template-columns:44px minmax(0,1fr);align-items:start} @media(max-width:560px){.arearow{grid-template-columns:1fr;gap:6px}.arearow .no{display:block}.areas>span:first-child{flex:0 0 100%;margin:0 0 2px}} .art .areas > span{font-size:10.5px;font-weight:500;text-transform:uppercase; letter-spacing:.18em;color:var(--mute);margin-right:4px} .art .areas a{font-size:12.5px;text-decoration:none;color:var(--body); border:1px solid var(--line);border-radius:100px;padding:6px 13px;letter-spacing:0; text-transform:none;font-weight:400;white-space:nowrap} .art .areas a:hover{border-color:var(--accent);color:var(--accent)} .invite{position:relative;z-index:1;color:var(--onDark)} .invite::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none; background:radial-gradient(110% 130% at 76% 50%,rgba(13,12,11,.84),rgba(13,12,11,.36) 60%,transparent)} .invite .label{color:var(--accent-lt)} .invite h2{font-family:var(--serif);font-weight:400;font-size:clamp(28px,3.1vw,41px); line-height:1.08;letter-spacing:-.02em;margin:0 0 24px;max-width:15ch; /* 15ch is a measure, not a wall. Greek builds long compounds, and "εμπιστευματοπάροχος" needs 281px where 15ch gives 245, so on a phone the word ran straight out of the heading and into the space beside it. There was room: the column is 342px. min-content keeps the measure for line breaking and stops the box being narrower than its own longest word. break-word is the backstop for a word longer than the column itself, which no heading has today. */ min-width:min-content;overflow-wrap:break-word} .invite p{color:var(--onDarkMute);max-width:54ch} .invite a:focus-visible{outline-color:var(--accent-lt)} .btn{display:inline-block;text-decoration:none;font-size:13px;font-weight:500; text-transform:uppercase;letter-spacing:.09em;padding:16px 28px;border-radius:var(--r); background:var(--accent);color:var(--paper)} .btn:hover{background:#A05B38;filter:none} .footwrap{position:relative;z-index:1;background:var(--paper)} footer{padding:54px 0;border-top:1px solid var(--line);color:var(--mute);font-size:13.5px} .fbar{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap} .reg{margin-top:14px;font-size:12.5px;color:var(--mute)} .note{font-size:12px;color:var(--mute);max-width:78ch;margin-top:18px;line-height:1.65} .note strong{color:var(--body)} .flag{position:fixed;left:12px;bottom:12px;z-index:60;background:var(--accent);color:#fff; font-size:11px;letter-spacing:.12em;text-transform:uppercase;padding:9px 14px; text-decoration:none;border-radius:var(--r)} .skip{position:absolute;left:-9999px;background:var(--paper);color:var(--ink);padding:12px 18px;z-index:99} .skip:focus{left:12px;top:12px} @media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}} /* sticky masthead, larger navigation type */ .top{background:var(--ink)} .nav ul a{font-size:12px} .nav ul{gap:20px} .navcta{font-size:12.5px} .mark{font-size:17px} @media(max-width:900px){.nav ul a{font-size:12px}} .mark .lk{display:inline-flex;align-items:center;gap:8px}.mark .lk img{height:16px;width:auto;display:block}.mark .rule{width:1px;height:22px;background:rgba(242,243,244,.28)}.mark .nm{font-family:var(--serif);font-weight:500;font-size:12.5px;line-height:1;letter-spacing:.09em;text-transform:uppercase;white-space:nowrap}.mark .nm .llc{font-size:68%;letter-spacing:.09em}@media(max-width:1180px){.mark .lk{gap:7px}.mark .lk img{height:14px}.mark .nm{font-size:11.5px}.mark .rule{height:19px}} .footmark{display:inline-flex;align-items:center;gap:9px;margin:0 0 26px;text-decoration:none}.footmark img{height:17px;width:auto;display:block}.frule{width:1px;height:23px;background:rgba(26,24,23,.22)}.fnm{font-family:var(--serif);font-weight:500;font-size:13px;line-height:1;letter-spacing:.09em;text-transform:uppercase;white-space:nowrap;color:var(--ink)}.fnm .llc{font-size:68%;letter-spacing:.09em} @media(max-width:760px){.mark .lk{gap:6px}.mark .lk img{height:13px}.mark .nm{font-size:10.5px}.mark .rule{height:17px}.footmark{gap:8px}.footmark img{height:14px}.fnm{font-size:11px}.frule{height:19px}} a[href^="tel:"],a[href^="mailto:"]{white-space:nowrap} @media (forced-colors: active){ .btn,.navcta{border:1px solid ButtonText} .burger span{background:ButtonText} } .checklist{list-style:none;margin:0;padding:0}.checklist li{position:relative;padding:11px 0 11px 24px;margin:0;font-size:16px;border-bottom:1px solid var(--hair)}.checklist li:last-child{border-bottom:0}.checklist li::before{content:"";position:absolute;left:0;top:calc(.62em + 11px);width:9px;height:1px;background:var(--accent)} .sumlab{font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:.2em;color:var(--accent);margin:26px 0 12px;display:flex;align-items:center;gap:12px}.sumlab::before{content:"";width:26px;height:1px;background:var(--accent);flex:none} .drawer .drawer-cta{font-family:var(--sans);font-size:11.5px;line-height:1.2;letter-spacing:.16em;padding:17px 22px;border-bottom:0;display:block;margin-top:26px;color:var(--paper);text-align:center} .arealist{border-top:1px solid var(--hair);counter-reset:ar;padding-left:64px}.arealist h3.mid{counter-increment:ar;position:relative;padding-top:28px;margin:0}.arealist h3.mid::before{content:counter(ar,decimal-leading-zero);position:absolute;left:-64px;top:34px;font-family:var(--serif);font-size:13px;color:var(--accent)}.arealist p{margin:10px 0 0;padding-bottom:28px;border-bottom:1px solid var(--hair);max-width:76ch}@media(max-width:760px){.arealist{padding-left:36px}.arealist h3.mid::before{left:-36px;top:32px}} @media(max-width:520px){.lead{display:block}.lead img{width:100%;height:auto;aspect-ratio:4/5;max-height:430px;object-position:50% 16%;margin:0 0 18px;border-radius:0;border:1px solid var(--hair)}.lead p{max-width:none}} .fgrid{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:clamp(24px,5vw,64px);padding-bottom:44px;border-bottom:1px solid var(--hair)}.fgrid h3,.fgrid h4,.fgrid .h4{font-family:var(--sans);font-size:10.5px;font-weight:500;text-transform:uppercase;letter-spacing:.18em;color:var(--ink);margin:0 0 16px}.fgrid ul{list-style:none;margin:0;padding:0}.fgrid li{margin-bottom:9px}.fgrid a{text-decoration:none;color:var(--mute)}.fgrid a:hover{color:var(--accent)}@media(max-width:900px){.fgrid{grid-template-columns:1fr 1fr}}@media(max-width:560px){.fgrid{grid-template-columns:1fr}} @media(max-width:1180px){.nav ul{gap:16px}.nav ul a{font-size:11px}.navcta{font-size:10px;padding:10px 13px;letter-spacing:.13em}} @media(max-width:1280px){html[lang=el] .nav ul{gap:12px}html[lang=el] .nav ul a{font-size:11px;letter-spacing:.05em}html[lang=el] .navcta{font-size:10px;padding:10px 11px;letter-spacing:.07em;margin-left:10px}}.article{max-width:60ch}h1,h2,h3,.big,.mid{text-wrap:balance}p,li,.stand,.lede{text-wrap:pretty}.checklist li::before{top:calc(.62em + 11px)} @media(max-width:760px){.sub-nav{flex-wrap:nowrap;overflow-x:auto;gap:0 22px;scrollbar-width:none}.sub-nav::-webkit-scrollbar{display:none}.sub-nav a{white-space:nowrap}} .article h2{margin:64px 0 16px}.article h3{margin:40px 0 10px}.quick{background:none;border-left:2px solid var(--accent);border-radius:0;padding:2px 0 2px 24px;margin-left:-26px;max-width:62ch}.quick .k{display:block;font-family:var(--sans);font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:.18em;color:var(--accent);margin-bottom:8px}@media(max-width:900px){.quick{margin-left:0}}.byline{gap:0 10px;align-items:baseline}.byline > * + *::before{content:"\00b7";margin-right:10px;color:var(--onDarkLine)}.checklist li::before{top:calc(.7em + 11px)} .toc-fold{margin:0}.toc-fold > summary{list-style:none;cursor:pointer;font-size:10.5px;font-weight:500;text-transform:uppercase;letter-spacing:.2em;color:var(--mute);padding:8px 0}.toc-fold > summary::-webkit-details-marker{display:none}.toc-fold > summary::after{content:"+";float:right;color:var(--accent);font-size:14px;line-height:1}.toc-fold[open] > summary::after{content:"\2212"}.toc-fold[open] > summary{margin-bottom:8px} .linklist{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:0}.linklist li{margin:0}.linklist a{display:flex;justify-content:space-between;align-items:baseline;gap:24px;padding:16px 0;border-top:1px solid var(--hair);color:var(--ink);text-decoration:none;font-size:16.5px}.linklist li:last-child a{border-bottom:1px solid var(--hair)}.linklist a::after{content:"\2192";color:var(--accent);flex:none}.linklist a:hover{color:var(--accent)} .wrap.masthead{position:relative} .mmeta{position:absolute;right:clamp(20px,4vw,56px);top:var(--s8);font-size:11px;font-weight:500; letter-spacing:.24em;text-transform:uppercase;color:rgba(242,243,244,.55);display:flex;align-items:center;gap:12px;margin:0} .mmeta i{width:24px;height:1px;background:var(--accent);display:inline-block} @media(max-width:1000px){.mmeta{display:none}} @media(max-width:760px){.masthead .stand{padding-left:18px}} @media(min-width:761px){.masthead .label a{white-space:nowrap}} .art{position:relative;transition:background .25s,padding-left .25s} .art:hover{background:linear-gradient(90deg,rgba(169,100,63,.055),rgba(169,100,63,0) 72%);padding-left:16px} .art::before{content:"";position:absolute;left:0;top:18px;bottom:18px;width:2px;background:var(--accent); transform:scaleY(0);transform-origin:top;transition:transform .25s} .art:hover::before{transform:scaleY(1)} /* --- conversion: mobile action bar + article CTA line --- */ .ctaline{border-left:2px solid var(--accent);padding:10px 0 10px 16px;margin:18px 0 6px;font-size:15px;color:var(--body)} .ctaline a{color:var(--link)} .actbar{display:none} @media(max-width:760px){ .actbar{position:fixed;left:0;right:0;bottom:0;z-index:70;display:flex;background:var(--ink); padding-bottom:env(safe-area-inset-bottom);border-top:2px solid var(--accent-lt); box-shadow:0 -10px 28px rgba(26,24,23,.22)} .actbar a{flex:1;display:block;text-align:center;padding:16px 4px 15px;color:#FAFAF9;text-decoration:none; font:500 13.5px/1 var(--sans);letter-spacing:.05em} .actbar a+a{border-left:1px solid rgba(250,250,249,.16)} .actbar a b{font-weight:500} body:has(.actbar){padding-bottom:calc(50px + env(safe-area-inset-bottom))} } /* ---------- Dark footer, 18 August 2026 ---------- The page now closes on the same ink it opens on. The office has its own column with a map link, and the small print sits on one row across the full width instead of stacked in a narrow left column. */ .footwrap{background:var(--ink)} footer{border-top:0;color:var(--onDarkMute)} .fnm{color:var(--onDark)} .frule{background:rgba(242,243,244,.28)} .fgrid{grid-template-columns:1.5fr .85fr 1.15fr 1.05fr;border-bottom:1px solid rgba(242,243,244,.12)} /* Five columns where the page carries the fixed fee services list. */ .fgrid:has(> div:nth-child(5)){grid-template-columns:1.25fr .75fr .95fr 1.05fr .95fr; gap:clamp(20px,3vw,44px)} @media(max-width:1080px){.fgrid:has(> div:nth-child(5)){grid-template-columns:1fr 1fr 1fr}} @media(max-width:820px){.fgrid:has(> div:nth-child(5)){grid-template-columns:1fr 1fr}} @media(max-width:560px){.fgrid:has(> div:nth-child(5)){grid-template-columns:1fr}} .fgrid h3,.fgrid h4,.fgrid .h4{color:var(--onDark)} .fgrid a{color:var(--onDarkMute)} .fgrid a:hover{color:var(--accent-lt)} .fdesc{max-width:38ch;margin:0} .faddr{font-style:normal;margin:0;line-height:1.75} .fmapline{margin:12px 0 0} .fmap{color:var(--accent-lt);text-decoration:none;border-bottom:1px solid rgba(212,150,125,.35); padding-bottom:1px} .fmap:hover{border-bottom-color:var(--accent-lt)} .fhrs{margin:12px 0 0;font-size:12.5px;color:rgba(242,243,244,.52)} .nb{white-space:nowrap} .fbar{display:block;margin-top:30px} .footwrap .note{color:rgba(242,243,244,.52);max-width:74ch;margin:0 0 18px} .fends{display:flex;justify-content:space-between;align-items:baseline; gap:14px clamp(18px,3vw,44px);flex-wrap:wrap} .fends .reg{margin:0;font-size:12.5px;color:rgba(242,243,244,.52)} .fends .flang{margin-left:auto} .fends a{color:rgba(242,243,244,.62);text-decoration:none; border-bottom:1px solid rgba(242,243,244,.22);padding-bottom:1px} .fends a:hover{color:var(--accent-lt);border-bottom-color:var(--accent-lt)} @media(max-width:1000px){.fgrid{grid-template-columns:1fr 1fr}} @media(max-width:560px){.fgrid{grid-template-columns:1fr} .fends{flex-direction:column;align-items:flex-start;gap:12px} .fends .flang{margin-left:0}} @media(max-width:760px){footer{padding-bottom:78px}} /* ---------- The fee table ---------- A row is a service, its fee and what the fee covers, and it stacks to one column on a phone rather than scrolling sideways. Moved here from the inline styles of fixed-fees.html on 18 August 2026, when el-statheres-amoives was added and rendered unstyled because the rules lived on one page only. */ .fees{border-top:1px solid var(--line);margin-top:8px} .fees .r{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px 24px; padding:18px 0;border-bottom:1px solid var(--hair);align-items:baseline} .fees .r h3{font-family:var(--serif);font-weight:400;color:var(--ink);margin:0; font-size:clamp(17px,1.4vw,20px);line-height:1.25} .fees .r h3 a{color:inherit;text-decoration:none;border-bottom:1px solid var(--hair)} .fees .r h3 a:hover{color:var(--accent)} .fees .r .f{white-space:nowrap;font-family:var(--serif);font-size:clamp(17px,1.5vw,21px); color:var(--ink)} .fees .r .f.q{font-family:var(--sans);font-size:12.5px;letter-spacing:.1em; text-transform:uppercase;color:var(--mute)} .fees .r > p:not(.f){grid-column:1/-1;margin:0;font-size:15px;color:var(--body);max-width:70ch} .fees .r .f{grid-column:2;margin:0} @media(max-width:560px){.fees .r{grid-template-columns:1fr}.fees .r .f{grid-column:1;justify-self:start;margin-top:2px;white-space:normal}} /* ---- The touch layer, 19 August 2026. Additive only: motion on the elements that answer the pointer, stillness for those who asked for it. ---- */ html{scroll-behavior:smooth} .btn{transition:background .22s ease,transform .22s ease,box-shadow .22s ease} .btn:hover{transform:translateY(-1px);box-shadow:0 8px 22px rgba(26,24,23,.18)} .btn:active{transform:none;box-shadow:0 3px 10px rgba(26,24,23,.14)} .navcta{transition:border-color .22s ease,color .22s ease} .art h3,.art h4,.art .h4,.tl-item h3 a{transition:color .22s ease} td,th{font-variant-numeric:tabular-nums} @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important} } /* ---- polish v3: selection, focus ring, scrollbar, quiet depth ---- */ ::selection{background:rgba(140,79,48,.16)} html{scrollbar-width:thin;scrollbar-color:rgba(140,79,48,.35) transparent} ::-webkit-scrollbar{width:11px;height:11px} ::-webkit-scrollbar-track{background:transparent} ::-webkit-scrollbar-thumb{background:rgba(140,79,48,.3);border-radius:8px; border:3px solid transparent;background-clip:content-box} ::-webkit-scrollbar-thumb:hover{background-color:rgba(140,79,48,.5)} :where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{ outline:2px solid var(--accent);outline-offset:3px} body{-webkit-tap-highlight-color:transparent} summary{cursor:pointer} .top{background-image:radial-gradient(130% 110% at 85% -25%,rgba(212,150,125,.09),transparent 55%)} .btn{background-image:linear-gradient(180deg,rgba(255,255,255,.10),rgba(0,0,0,.05))} @media(max-width:760px){.sub-nav{mask-image:linear-gradient(90deg,#000 86%,transparent); -webkit-mask-image:linear-gradient(90deg,#000 86%,transparent)}} /* ---- polish v4: the showpieces. Footer wordmark, grain, drawn underlines ---- */ .top{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.045'/%3E%3C/svg%3E"), radial-gradient(130% 110% at 85% -25%,rgba(212,150,125,.09),transparent 55%)} .nav ul a{background-image:linear-gradient(currentColor,currentColor); background-repeat:no-repeat;background-size:0% 1px;background-position:0 calc(100% - 1px); transition:background-size .3s ease,color .2s ease} .nav ul a:hover{background-size:100% 1px} body{animation:pageIn .45s ease both} @keyframes pageIn{from{opacity:0}} /* ---- polish v5: the touches you meet every visit ---- */ details summary{transition:color .2s ease} details summary:hover{color:var(--accent)} details summary::after{transition:transform .3s ease} details[open] summary::after{content:"+";transform:rotate(45deg)} details[open] .a{animation:ansIn .35s ease} @keyframes ansIn{from{opacity:0;transform:translateY(-4px)}} .drawer a{opacity:0;transform:translateY(14px); transition:transform .5s cubic-bezier(.2,.6,.2,1),opacity .5s ease} .drawer[data-open="true"] a{opacity:1;transform:none} .drawer[data-open="true"] a:nth-of-type(2){transition-delay:.05s} .drawer[data-open="true"] a:nth-of-type(3){transition-delay:.09s} .drawer[data-open="true"] a:nth-of-type(4){transition-delay:.13s} .drawer[data-open="true"] a:nth-of-type(5){transition-delay:.17s} .drawer[data-open="true"] a:nth-of-type(6){transition-delay:.21s} .drawer[data-open="true"] a:nth-of-type(7){transition-delay:.25s} .drawer[data-open="true"] a:nth-of-type(8){transition-delay:.29s} .drawer[data-open="true"] a:nth-of-type(9){transition-delay:.33s} .drawer[data-open="true"] a:nth-of-type(10){transition-delay:.36s} .invite{border-top:1px solid rgba(212,150,125,.16)} /* mobile: reading rows stack; a long category label no longer squeezes the title */ @media(max-width:640px){ .art{grid-template-columns:1fr;gap:6px;align-items:start} .art > span{justify-self:start} } /* ---- polish v6: the expensive pass, 21 August 2026. Materials rather than ornament: a copper seam where the paper meets the ink, the monogram set into the footer like a maker's stamp, page-to-page continuity, a composed entrance for every masthead, and proper clothes for the furniture that had none: tables, quotations, rules, and the printed page. ---- */ /* Definitions this sheet referenced but never carried: .ctaline links were falling back to the body colour wherever the class appears. */ :root{--link:#8C4F30;--link-hover:#6E4630;--link-visited:#A9643F} html{text-rendering:optimizeLegibility;font-kerning:normal} :target{scroll-margin-top:96px} /* Page-to-page continuity. Browsers that can cross-fade whole documents do, and the body fade steps aside there so the two effects do not stack. */ @view-transition{navigation:auto} ::view-transition-old(root){animation-duration:.22s} ::view-transition-new(root){animation-duration:.22s} @supports (view-transition-name:root){body{animation:none}} @media (prefers-reduced-motion:reduce){@view-transition{navigation:none}} /* Every page arrives composed: the label, then the headline, then the standfirst, each a beat behind the one before. Opacity and transform only, so nothing shifts and nothing reflows. */ @media (prefers-reduced-motion:no-preference){ .masthead .label{animation:mastIn .55s cubic-bezier(.2,.6,.2,1) both} .masthead h1{animation:mastIn .65s cubic-bezier(.2,.6,.2,1) .07s both} .masthead .stand,.masthead .lede,.masthead .byline,.masthead .sub-nav{ animation:mastIn .7s cubic-bezier(.2,.6,.2,1) .15s both} } @keyframes mastIn{from{opacity:0;transform:translateY(12px)}} /* The seam: where the paper sheet meets the ink above it, a thread of copper light, the same one the invite band already wears. And a hairline between the invite and the footer, which sat on the same ink with no edge. */ .sheet{box-shadow:0 -1px 0 rgba(212,150,125,.22)} .footwrap{border-top:1px solid rgba(242,243,244,.07)} /* Buttons carry an inner light along the top edge, the way lacquer catches it, kept through the hover and dimmed on the press. */ .btn{box-shadow:inset 0 1px 0 rgba(255,255,255,.16)} .btn:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 8px 22px rgba(26,24,23,.18)} .btn:active{box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 3px 10px rgba(26,24,23,.14)} .navcta{transition:border-color .22s ease,color .22s ease,background-color .22s ease} .navcta:hover{background:rgba(212,150,125,.07)} /* The arrows answer the pointer, the chips take a wash of the accent. */ .linklist a::after{transition:transform .25s ease} .linklist a:hover::after{transform:translateX(4px)} .art .areas a{transition:border-color .2s ease,color .2s ease,background-color .2s ease} .art .areas a:hover{background:rgba(169,100,63,.05)} /* Portraits sit on the page like mounted plates: a hairline edge and a shadow that falls away, not a glow. */ .lead img{box-shadow:0 0 0 1px var(--hair),0 16px 30px -22px rgba(26,24,23,.55)} /* Any table in running text sits on the same hairlines as everything else. A table that carries its own inline finish keeps it; this is the floor. */ table{border-collapse:collapse} .two table,.article table{width:100%;margin:26px 0;font-size:15.5px;line-height:1.6} th{font-family:var(--sans);font-size:10.5px;font-weight:500;text-transform:uppercase; letter-spacing:.16em;color:var(--mute);text-align:left;padding:10px 20px 10px 0; border-bottom:1px solid var(--line)} td{padding:11px 20px 11px 0;border-bottom:1px solid var(--hair);vertical-align:top} th:last-child,td:last-child{padding-right:0} /* A quotation is set in the serif on the copper spine every aside wears. */ blockquote{margin:32px 0;padding:2px 0 2px 24px;border-left:2px solid var(--accent); font-family:var(--serif);font-size:clamp(18px,1.7vw,21px);line-height:1.55;color:var(--ink)} blockquote p{max-width:52ch} blockquote p:last-child{margin-bottom:0} cite{font-family:var(--sans);font-style:normal;font-size:12px;letter-spacing:.14em; text-transform:uppercase;color:var(--mute)} /* A rule in running text is short, copper and quiet, not a fence. */ .two hr,.article hr{border:0;width:56px;height:1px;background:var(--accent); margin:44px 0;opacity:.6} .two figure,.article figure{margin:32px 0} .two figure img,.article figure img{max-width:100%;height:auto;display:block;border-radius:var(--r)} figcaption{font-size:13px;color:var(--mute);margin-top:10px} /* The printed page: chrome off, ink on white, the letterhead voice. Clients print advice; the print should look like it came from the same firm. */ @media print{ body{background:#fff!important;color:#1A1817;animation:none} #plan,.cymap,.nav ul,.navcta,.burger,.drawer,.actbar,.flag,.skip,.invite, .sub-nav,.mmeta{display:none!important} .top,.sheet,.footwrap{background:#fff!important;box-shadow:none} .top::after,.top::before{display:none} .top{color:#1A1817} .nav{border-bottom-color:rgba(26,24,23,.2)} .mark,.mark .nm{color:#1A1817} .mark .lk img{filter:invert(1)} .mark .rule{background:rgba(26,24,23,.3)} .masthead h1{color:#1A1817} .masthead .stand{color:#423D39} .byline{color:#6E6862;border-top-color:rgba(26,24,23,.2)} .byline b{color:#1A1817} footer{color:#6E6862;border-top:1px solid rgba(26,24,23,.2)} .footmark img{filter:invert(1)} .fnm{color:#1A1817} .frule{background:rgba(26,24,23,.3)} .fgrid{border-bottom-color:rgba(26,24,23,.12)} .fgrid h3,.fgrid h4,.fgrid .h4{color:#1A1817} .fgrid a,.fends a,.note,.fends .reg,.fhrs{color:#6E6862} .fmap{color:#6E4630} a{text-decoration:none} } /* The intake widget is chrome too: never on the printed page. */ @media print{.k-b,.k-p{display:none!important}} /* ---- polish v6.1, 21 August 2026: the tool fields. Moved out of 48 identical inline styles on the ten calculators and checkers, so the controls could be finished properly: a tailored chevron on the select, a focus ring, a border that answers the hover, and a field that brightens to white while it is being written in. ---- */ .fld{width:100%;font:inherit;font-size:16.5px;color:var(--ink);background:var(--paper2); border:1px solid var(--line);border-radius:var(--r);padding:11px 14px; transition:border-color .2s ease,box-shadow .2s ease,background-color .2s ease} .fld:hover:not(:focus){border-color:rgba(26,24,23,.34)} .fld:focus{outline:none;border-color:var(--accent);background-color:#fff; box-shadow:0 0 0 3px rgba(140,79,48,.12)} select.fld{appearance:none;-webkit-appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%236E6862' stroke-width='1.5'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right 14px center;padding-right:40px} input.fld::-webkit-calendar-picker-indicator{opacity:.55;cursor:pointer} input.fld::-webkit-calendar-picker-indicator:hover{opacity:.85} /* The footer listed seven fixed-fee services at the same weight as the firm itself, which reads as a practice that mainly sells packaged corporate products. The heading is now Services and this column is a size quieter. The links stay: three of those pages have no inbound link anywhere on the site except this column and /fixed-fees, so dropping them would take them out of the link graph to fix an impression. */ .fgrid .fsvc a{font-size:14px} .fgrid .fsvc li{margin-bottom:7px} /* A row of jumps to a long page's own sections. Deliberately plain: a label, then the headings, wrapping. No box, no numbers, no icons. It exists because 101 pages of more than 1,200 words carried five or more headings and no wayfinding of any kind, which on a phone leaves the one section the reader wanted somewhere inside a wall of text. Written by tools/build-jumps.py. */ .jumps{display:flex;flex-wrap:wrap;gap:9px; margin:0 0 var(--s6);padding:20px 0 22px; border-top:1px solid var(--hair);border-bottom:1px solid var(--hair); counter-reset:jmp} .jumps > span{font-family:var(--sans);font-size:10.5px;font-weight:500; text-transform:uppercase;letter-spacing:.18em;color:var(--mute); flex:0 0 100%;margin:0 0 7px} .jumps a{counter-increment:jmp;display:inline-flex;align-items:baseline;gap:10px; max-width:100%;font-family:var(--sans);font-size:13.5px;line-height:1.45; color:var(--body);text-decoration:none;padding:10px 15px; border:1px solid var(--line);border-radius:var(--r);background:transparent; transition:color .22s ease,border-color .22s ease,background .22s ease, transform .22s ease,box-shadow .22s ease} .jumps a::before{content:counter(jmp,decimal-leading-zero);flex:none; font-family:var(--serif);font-size:11.5px;color:var(--accent)} .jumps a:hover{color:var(--ink);border-color:rgba(140,79,48,.4); background:rgba(140,79,48,.05);transform:translateY(-1px); box-shadow:0 6px 16px rgba(26,24,23,.07)} .jumps a:active{transform:none;box-shadow:0 2px 7px rgba(26,24,23,.06)} .jumps a:focus-visible{border-radius:var(--r)} /* The row is navigation for what comes next, so it should sit closer to that than to what precedes it. Measured across the 99 pages that carry one: where the next thing is a .two or a heading the gap is 56px and reads correctly, but where it is a
the section brings its own 102px of padding on top of this margin and the row is left stranded above a void. Dropping the margin in that case alone brings 133px down to 77px, next to the 56px the other shape already had. */ .jumps:has(+ section){margin-bottom:0} @media(max-width:640px){.jumps{gap:8px;padding:18px 0 20px}.jumps a{font-size:14px;padding:13px 14px;line-height:1.4}} /* Measured on 25 August 2026: section padding on a 390px phone came out at 0.74 of the same padding on a 1440px desktop. That is backwards. The spacing scale is clamp(64px,6vw,96px), so a wide screen takes the 6vw and a phone falls to the floor, and the phone is the screen where a paragraph runs to forty characters a line and needs the gap most to tell one section from the next. Raising the floor only under the phone breakpoint, rather than raising the clamp minimum, leaves every other width exactly as it was. */ @media(max-width:640px){:root{--s6:56px;--s7:80px;--s8:96px}} /* A FAQ list needs air around its label. The section that introduces one is written as
, which is this site's idiom for a block that continues the one above it, and 988 sections use it correctly: "Who leads this work" really does continue the page it follows. A FAQ does not continue anything. It is a new section, and with no top padding its eyebrow label sat 27 pixels under the edge of the block above and 22 pixels over the first question, which on a phone reads as cramped rather than as a beginning. Overriding an inline style needs !important, and that is the narrower change of the two available: the alternative is editing the same attribute in 91 files and relying on whoever writes the next FAQ to remember. The selector is exact, an eyebrow label followed by a container whose own children are the questions, so no other section moves. */ section:has(> p.label + div > details){padding-top:var(--s6)!important} p.label:has(+ div > details){margin-bottom:30px} @media(max-width:640px){p.label:has(+ div > details){margin-bottom:26px}} /* A fact under an eyebrow, as against a row of chips. .areas is a flex row: an uppercase label, then links styled as pills. That is right for "Instructed on" and for "Writing", where every child really is a destination. It was also being used for two things that are prose, and flex does to prose what flex does: "Qualifications" put its label inline with a four-credential run that wrapped over five lines, and "The matters" turned an inline link into a pill in the middle of a sentence and left the full stop behind it as a flex item of its own, floating after the pill. So prose gets its own component. The label sits above as an eyebrow, the value reads as a sentence, and a link inside it is a link. */ .fact{margin-top:24px} .fact .k{font-family:var(--sans);font-size:10.5px;font-weight:500; text-transform:uppercase;letter-spacing:.18em;color:var(--mute);margin:0 0 9px} .fact p{margin:0;font-size:15.5px;line-height:1.62;color:var(--body);max-width:58ch} .fact p a{color:var(--accent);text-decoration:none; border-bottom:1px solid rgba(140,79,48,.34);padding-bottom:1px; transition:border-color .2s ease} .fact p a:hover{border-bottom-color:var(--accent)} .creds{margin:0;padding:0;list-style:none;max-width:58ch} .creds li{position:relative;padding-left:20px;margin:0 0 7px; font-size:15.5px;line-height:1.55;color:var(--body)} .creds li:last-child{margin-bottom:0} /* the same hairline the eyebrow labels use, at the scale of a list marker */ .creds li::before{content:"";position:absolute;left:0;top:.66em; width:9px;height:1px;background:var(--accent)} /* "More on this": a row each, not a sentence. The strip was a comma separated list of article titles, and on a phone four of them ran together into seven lines of underlined text with no visible boundary between one title and the next. The separator could not do its job because article titles carry their own commas and colons: "When an AI System Causes Loss: Liability, Data Protection and Contracts" contains both. It was also styled on only some of the site. 264 pages had no .rel rule at all, so the strip inherited 17px body text and the default underline, which is where the wall came from; the other 163 had it at 15px in the muted grey. Hairline separated rows, with the arrow that .endlinks already uses and the same nudge on hover, so the boundary is the row itself. */ /* Scoped to nav.rel, which is what build-siblings.py writes. There are 171 hand written

lines elsewhere on the site, prose with inline links in it, and styling every .rel as a list turned each of those links into a full width row: "All our writing is on the / writing index / . Related: / Property / and / ..." one line at a time. The generated strip and a sentence are different things and only the strip is a list. */ nav.rel{margin-top:var(--s6);border-top:1px solid var(--line)} nav.rel .k{font-family:var(--sans);font-size:10.5px;font-weight:500; text-transform:uppercase;letter-spacing:.18em;color:var(--mute);margin:20px 0 0} nav.rel ul{list-style:none;margin:0;padding:0} nav.rel li{border-bottom:1px solid var(--hair)} nav.rel li:last-child{border-bottom:0} nav.rel a{display:flex;gap:18px;align-items:baseline;justify-content:space-between; padding:15px 0;text-decoration:none;color:var(--body); font-size:16px;line-height:1.45;transition:color .2s ease} nav.rel a span{flex:none;color:var(--accent);transition:transform .2s ease} nav.rel a:hover{color:var(--accent)} nav.rel a:hover span{transform:translateX(3px)} @media(max-width:640px){nav.rel a{font-size:15.5px;padding:14px 0}} /* the prose line these rules used to share, put back as it was */ p.rel{margin-top:26px;font-size:15px;color:var(--mute)} p.rel a{color:var(--accent)} /* A partner profile is not a continuation of the page above it. .person sits inside

on each partner's own page, which gives it 102px of air. On the team page and its Greek twin the same block sits inside
, the site's continuation idiom, and the measured gap between the intro heading and the top of the portrait was zero: the photograph began exactly where the sentence above it ended. Four sections across the two files. */ section:has(> .person){padding-top:var(--s7)!important} /* The location line beside the page label. It carried no colour of its own, so it inherited --onDarkMute, which is .6 alpha. Composited on the masthead ink that is #9C9B9C, 6.39:1, and next to "ABOUT" in --accent-lt it reads as hazy rather than quiet: the two are the same size and tracking and should be peers. Matching the accent's contrast exactly would mean .65, and that is the wrong answer, because a warm mid tone carries presence a neutral grey does not and the label would still look washed. .8 gives #C7C7C8 at 10.47:1, clearly a peer, still short of the full white the headline uses. Set on .mmeta rather than on --onDarkMute, which is shared with the consultation block's body text and should not move. */ /* The location line beside the page label. It was written as .mmeta, which is 0,1,0, and .masthead p is 0,1,1, so on every page with a masthead none of it applied: not the absolute position in the corner, not the 11px, not the tracking, not the colour. It was rendering as an ordinary masthead paragraph at 16.64px in --onDarkMute, which is why it looked washed and why it sat in the flow rather than in the corner. Raised to .masthead .mmeta, 0,2,0, which wins. The colour goes to .8 at the same time: composited on the masthead ink that is #C7C7C8 at 10.47:1, so it reads as a peer of the page label beside it. Matching the accent's contrast exactly would be .65, and that is the wrong answer, because a warm mid tone carries presence a neutral grey does not. */ .masthead .mmeta{position:absolute;right:clamp(20px,4vw,56px);top:var(--s8); font-size:11px;font-weight:500;letter-spacing:.24em;text-transform:uppercase; color:rgba(242,243,244,.8);display:flex;align-items:center;gap:12px;margin:0;max-width:none} /* And it stays off the phone, where it was always meant to be off. The rule that hid it reads .mmeta inside a media query; this one reads .masthead .mmeta and sits later in the file, so it won it twice over and the label had been showing at 320px on top of the breadcrumb. */ @media(max-width:1000px){.masthead .mmeta{display:none}} /* Greek does not break. At 320px a single word like κατασκευαστικών is wider than the column it sits in, so it painted past the edge and pushed the whole document sideways. Fifteen pages did that, nearly all of them Greek, and the masthead heading and the breadcrumb label were where it showed. break-word acts only on a word that cannot fit on a line of its own, so ordinary text, English or Greek, is untouched. */ h1,h2,h3,h4,.label,.quick .k,summary{overflow-wrap:break-word} /* And the breadcrumb above a masthead heading is a flex row of four: the rule, the practice area, the slash, the page. It was set not to wrap, so at 320px those four measured 319 in a box of 272 and the surplus went out of the page. Wrapping costs nothing at any width where they already fit. */ .label{flex-wrap:wrap} /* Below about 380px the masthead heading is at its 40px floor while the column is 272px, and Greek has words that do not fit in that: Αυτοκατανάλωση measures 321. Thirty three headings, in both languages, were breaking in the middle of a word. Nothing wider than a phone this narrow is affected. */ @media(max-width:380px){.masthead h1{font-size:32px}} /* ---------- The newsletter card ---------- Until 25 August 2026 these rules lived only in a per-page inline