/* shared/meadow.css β€” every booking page on this site, in Chantelle's Meadow language. * * πŸ”΄ MOVED HERE FROM Nick/meadow.css ON 2026-09-22, on Nick's instruction: "can you redo dean * and dindins booking pages in the new branding identical to mine". All five pages β€” Nick's, Dean's * two and Dindin's two β€” now load this one sheet and nothing else. /shared/one-booking.css, which * dressed the other four until today, is loaded by no page any more; it is left on disk rather than * deleted because deleting is not mine to do, and it is inert. * * πŸ”΄ THE TYPEFACES COME FROM THIS SITE, from /shared/fonts/, moved out of Nick/assets/ the same * day. The four pages used to pull three families from Google, which meant a third party saw every * person who opened a booking page and the look of the page depended on someone else staying up. * Nick's page stopped doing that on 2026-09-20; today the other four stop too. * * Built to /tmp/hs-booking-design/booking-v3.html and its two renders (v3-1280.png, v3-375.png), * which Nick accepted. The settled removals are recorded in that package's HANDOFF.md and are * enforced here rather than left to chance: no "Pick a date" heading, no duration badge, no * New York metadata, no "Nick's calendar runs on…" sentence, no slot counts inside date * buttons, no repeated header sentence, no marker highlights. * * πŸ”΄ THE SHARED MODULES INJECT THEIR OWN STYLES INTO AT RUN TIME β€” after this file, so * they win on equal specificity. Two things follow. (1) Most of their look is driven by --pb-* * variables, so the ":root" block below re-points those at Meadow's palette and the calendar * and timezone control simply become Meadow-coloured. (2) Anything they hard-code is re-stated * further down under a deliberately heavier selector (#dayGrid …, .picker …). Loosening those * selectors will silently hand the page back to the injected defaults. */ @import url("/shared/fonts/fonts.css"); :root{ --paper:#FFF5E2; --ink:#232323; --blue:#5266EB; --lime:#D3DB6A; --sand:#EFE4CF; --dim:#AEB3CE; /* unavailable calendar dates */ --serif:"Source Serif 4",Georgia,serif; --sans:Figtree,system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif; color-scheme:light; /* the shared calendar / timezone modules read these, with their own Pop Bento values as fallbacks. Re-pointing them here is what turns that chrome Meadow-coloured. */ --pb-ink:#232323; --pb-paper:#FFF5E2; --pb-dim:#AEB3CE; --pb-mint:#5266EB; --pb-butter:#232323; --pb-line:#EFE4CF; --pb-head:"Source Serif 4",Georgia,serif; --pb-body:Figtree,system-ui,sans-serif; --pb-num:Figtree,system-ui,sans-serif; --pb-shadow-sm:none; --pb-shadow:0 18px 40px rgba(35,35,35,.14); --pb-hard:rgba(35,35,35,.35); } *{box-sizing:border-box} html,body{margin:0;padding:0} body{ background:var(--paper); color:var(--ink); font:17px/1.6 var(--sans); -webkit-font-smoothing:antialiased; } button,input,textarea,select{font:inherit;color:inherit} button{cursor:pointer} a{color:inherit} [hidden]{display:none!important} button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{ outline:2px solid var(--blue); outline-offset:4px; } .pg{max-width:1200px;margin:auto;padding:0 40px} /* ── the masthead. One mark, nothing beside it: the old top-right "Sidekicks Hiring Roadmap Session" line repeated the picker's own title three inches away. ───────────────────────── */ .head{ height:88px; display:flex; align-items:center; border-bottom:1px solid var(--sand); } .logo{width:228px;height:auto;display:block} /* ── the page. Desktop: the pitch reads down the left, the picker holds the right and starts at the top. Phone: the picker comes FIRST so open dates are on screen without scrolling. ── */ .split{ display:grid; grid-template-columns:minmax(0,1fr) minmax(440px,1fr); grid-template-areas:"promise picker" "host picker" "reassurance picker"; grid-template-rows:auto minmax(0,1fr) auto; gap:20px 64px; align-items:start; padding:40px 0 48px; } .promise{grid-area:promise;margin:0;font-size:17px;line-height:1.65;max-width:48ch} /* The offer sentence's opening is set as display type and sits on its own lines. The WORDS are untouched β€” this is typesetting, not editing, and the span is inside the original sentence. */ .offer-lead{ display:block; font:500 30px/1.2 var(--serif); letter-spacing:-.5px; margin-bottom:12px; text-wrap:balance; } .lede{ grid-area:host; position:relative; isolation:isolate; display:grid; grid-template-columns:220px minmax(0,1fr); gap:24px; align-items:center; align-self:stretch; } /* 612x921, true proportion, never cropped. multiply drops the cut-out's white ground onto the cream so the figure sits on the page rather than in a box. */ /* πŸ”΄ A MAXIMUM WIDTH, NOT A FIXED ONE, so a height ceiling can take the width down with it rather than squashing the picture β€” Nick's ruling is true proportion, never cut. The ceiling is a backstop for a photo nobody has yet: every portrait in use is 1.5:1 and reaches 331, well inside 380. What actually sizes every real photograph is the max-width on this line. */ .portrait{max-width:220px;width:auto;max-height:380px;height:auto;display:block;mix-blend-mode:multiply;align-self:center} .lede h1{font:500 25px/1.2 var(--serif);letter-spacing:-.3px;margin:0 0 12px} .lede h1 + p,.lede p{font-size:16px;line-height:1.6;margin:0} .lede .said{min-width:0} .reassurance{ grid-area:reassurance; margin:0; padding:18px 22px; background:var(--lime); border-radius:12px; font-size:16px; line-height:1.55; max-width:52ch; align-self:end; } .reassurance strong{font-weight:600} /* ── A PAGE WITH NO OFFER LINE AND NO REASSURANCE ──────────────────────────── Nick's page carries three blocks down its left side: an offer line, the host beside the portrait, and a reassurance. Dean's two pages and Dindin's two carry ONE β€” a headline and a few lines beside a portrait β€” because that is all the copy those pages have ever had, and inventing an offer line and a guarantee for somebody else's call is not a restyle. πŸ”΄ SO THE GRID COLLAPSES TO THE AREAS THAT EXIST rather than holding two empty rows open: an empty grid area still takes its gap, and the picker would start a row lower than the words beside it for no reason a reader could see. A host who later publishes a headline and lines gets them in exactly the place Nick's sit. */ /* πŸ”΄ A PAGE THAT REFUSES MUST NOT ALSO BE URGING THE READER ON. One page β€” Dindin's client interview β€” shows a refusal instead of a calendar when the link it arrived on names no candidate. Beside that refusal sat a headline saying "Book time with your candidate." and a line saying "Pick a time to meet…", so a visitor was being told to do the thing the page had just said it could not do. Rewriting either sentence is not a builder's call on a live client page; not showing an instruction that cannot be followed needs no new words at all. What is left is the mark, the name of the call and the reason, in one column. */ .split.is-blocked{ grid-template-columns:minmax(0,1fr); grid-template-areas:"picker"; max-width:640px; margin:0 auto; } .split.is-blocked .lede{display:none} .split.is-lean{ grid-template-areas:"host picker"; grid-template-rows:auto; } /* πŸ”΄ MEASURED, NOT GUESSED: at 1280 Nick's left column ends on exactly the same line as the card β€” 756 against 756 β€” because it carries three blocks. A lean page carries one, and with align-self:start it ended at 459 against a card ending at 720: 261px of empty cream under a photograph, which reads as a page that stopped rather than a page that balanced. `stretch` is not the answer either; it would float the portrait in the middle of that void instead of parking it above one. Nick's own recorded ruling on this exact symptom, 2026-08-02: "everything on the left it top aligned - balance it better to use available space". So both halves of what he said: the block is centred against the card, and the portrait grows into the room a lean page has. */ .split.is-lean .lede{align-self:center} /* on these pages the headline IS the promise, so it is set at the size the offer line takes on Nick's rather than the smaller size a headline drops to when a bigger line sits above it */ .split.is-lean .lede h1{font-size:30px;letter-spacing:-.5px;margin-bottom:14px} /* 250 rather than 220: still inside the 380px height ceiling every portrait on this site obeys (598x900 at 250 wide is 376 tall), and the track has to grow with it or the picture spills. */ .split.is-lean .lede{grid-template-columns:250px minmax(0,1fr)} .split.is-lean .portrait{max-width:250px} /* ── the picker ─────────────────────────────────────────────────────────────────────────── */ .picker{grid-area:picker;align-self:start;min-width:0} .card{ background:#fff; border:1px solid var(--sand); border-radius:20px; padding:24px; min-width:0; } .picker-head h1{ font:500 32px/1.12 var(--serif); letter-spacing:-.7px; margin:0 0 12px; text-wrap:balance; } .picker-head h1 em{color:var(--blue);font-weight:500;font-style:italic} /* the four steps. Small on purpose β€” scheduling is the subject, the tracker is a caption β€” but every one of them is still a 44px target. */ .stepper{ display:flex; justify-content:flex-start; gap:16px; border-bottom:1px solid var(--sand); padding-bottom:6px; margin-bottom:16px; } .step-line{display:none} .step-dot{ display:flex; gap:6px; align-items:center; min-height:44px; min-width:44px; font-size:11px; background:none; border:0; padding:0; } .step-dot .n{ font-size:10px; width:18px; height:18px; flex:none; border:1px solid var(--sand); border-radius:50%; display:grid; place-items:center; font-weight:500; } .step-dot.is-active{color:var(--blue)} .step-dot.is-active .n{background:var(--blue);border-color:var(--blue);color:#fff} .step-dot.is-done .n{border-color:var(--ink)} /* the same module underlines the label of every step you can go back to. The drawing does not, and the underline reads as four links competing with the month underneath. */ .stepper .step-dot.is-nav .lbl{text-decoration:none} .stepper .step-dot.is-nav:hover .n{transform:none;box-shadow:none} .step-title{font:500 30px/1.2 var(--serif);letter-spacing:-.6px;margin:0 0 20px} /* ── the month grid. The shared module draws it; these rules re-cut it to the drawing. #dayGrid raises specificity above the module's own injected sheet, which loads later. ──── */ #dayGrid .cal{border:0;border-radius:0;background:none;padding:0} #dayGrid .cal-head{margin:0 0 16px;gap:8px} #dayGrid .cal-title{ font:600 16px/1.2 var(--sans); color:var(--ink); letter-spacing:0; } #dayGrid .cal-nav{ width:44px; height:44px; border:1px solid var(--sand); border-radius:50%; background:#fff; color:var(--ink); font-size:0; font-family:var(--sans); font-weight:400; } /* The module writes β€Ή and β€Ί into these buttons. The drawing uses full arrows, so the glyph is replaced here rather than in the module, which still draws four other pages. The buttons keep their own aria-labels, so nothing changes for a screen reader. */ #dayGrid .cal-nav::after{font-size:20px;line-height:1} #dayGrid .cal-nav[aria-label="Previous month"]::after{content:"\2190"} #dayGrid .cal-nav[aria-label="Next month"]::after{content:"\2192"} #dayGrid .cal-nav:hover:not(:disabled){background:var(--paper);box-shadow:none} #dayGrid .cal-nav:active:not(:disabled){transform:none} #dayGrid .cal-grid{gap:4px} #dayGrid .cal-dow{ font:400 12px/1 var(--sans); color:var(--ink); text-transform:none; letter-spacing:0; height:28px; display:grid; place-items:center; padding:0; } #dayGrid .cal-cell{ height:48px; min-height:48px; padding:0; border:0; border-radius:0; background:none; font-family:var(--sans); } #dayGrid .cal-cell .d{font:400 16px/1 var(--sans);color:var(--ink)} /* πŸ”΄ Nick removed the "1 time" line inside date buttons β€” available dates are one consistent blue square, not a two-line outlined circle. The count still reaches screen readers through the cell's aria-label, which the module sets. */ #dayGrid .cal-cell .c{display:none} #dayGrid .cal-cell.off .d{color:var(--dim);opacity:1} #dayGrid .cal-cell.avail{ width:44px; height:44px; min-height:44px; align-self:center; justify-self:center; border:0; border-radius:8px; background:var(--blue); } #dayGrid .cal-cell.avail .d{color:#fff} #dayGrid .cal-cell.avail:hover{background:var(--ink);box-shadow:none} #dayGrid .cal-cell.avail:active{transform:none} #dayGrid .cal-cell.sel{background:var(--ink);box-shadow:none} #dayGrid .cal-cell.today{outline:1px solid var(--sand);outline-offset:-1px;border-radius:8px} #dayGrid .cal-cell:focus-visible{outline:2px solid var(--blue);outline-offset:2px} #dayGrid .cal-empty,#dayGrid .loading,#dayGrid .err-note{ font:400 15px/1.5 var(--sans); color:var(--ink); text-align:left; border:1px solid var(--sand); border-radius:10px; padding:20px; margin:0; } #dayGrid .err-note{border:2px solid var(--ink)} /* ── the times ─────────────────────────────────────────────────────────────────────────── */ .time-grid{display:grid;gap:10px} .slot-btn{ width:100%; border:1px solid var(--sand); background:#fff; border-radius:999px; padding:12px 20px; min-height:52px; display:flex; justify-content:space-between; align-items:center; gap:12px; font-size:17px; } .slot-btn:hover{background:var(--paper)} .slot-btn .z{font-size:13px} /* πŸ”΄ The navigation module injects its own .bk-back β€” a bordered pill β€” into at run time, which lands AFTER this file and wins on an equal selector. The drawing has two different back affordances, so both are re-stated here under a heavier selector: a plain underlined link above the times, and a pill docked left of Confirm booking on the details step. */ .picker .bk-back{ background:none; border:0; box-shadow:none; text-decoration:underline; text-underline-offset:3px; min-height:44px; padding:0; margin:0 0 12px; font:400 15px/1.6 var(--sans); letter-spacing:0; } .picker .bk-back:hover{box-shadow:none} .picker .bk-back:active{transform:none} .picker .form-actions .bk-back{ border:1px solid var(--sand); border-radius:999px; background:#fff; text-decoration:none; padding:10px 20px; min-height:52px; font-size:17px; line-height:32px; margin:0; flex:none; } /* ── the details form ──────────────────────────────────────────────────────────────────── */ .selected-line{ background:var(--paper); padding:14px 16px; font-size:14px; border-radius:8px; margin-bottom:20px; } .host-time-line{display:block;margin-top:4px;opacity:.75} .booking-form{display:block} .booking-form label{font-size:14px;display:block;margin-top:16px} .booking-form label:first-of-type{margin-top:0} .bk-input,.bk-ta{ display:block; width:100%; border:1px solid var(--sand); background:#fff; border-radius:8px; padding:10px 12px; min-height:48px; margin-top:4px; } .bk-ta{min-height:88px;resize:vertical} /* the honeypot: never seen, never focusable, still submitted under its exact name */ .hp-field{display:none} .form-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px;align-items:center} .form-actions .bk-back{margin-bottom:0} .submit-btn,.mgmt-btn{ min-height:52px; display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--sand); border-radius:999px; background:#fff; color:var(--ink); font-size:17px; line-height:32px; padding:10px 20px; text-decoration:none; } .submit-btn,.mgmt-btn.primary{background:var(--blue);border-color:var(--blue);color:#fff} .submit-btn:disabled{opacity:.6;cursor:default} .mgmt-btn:hover,.submit-btn:not(:disabled):hover{border-color:var(--ink)} .status-msg{font-size:14px;margin-top:12px} .status-msg.err{color:#A3341F} /* ── the confirmation fallback (only ever seen if the move to the next page is blocked) ─── */ .confirm-summary{ background:var(--paper); padding:14px 16px; font-size:15px; border-radius:8px; margin-top:16px; } #manageLinks{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px} /* πŸ”΄ THE SUMMARY BUILDS ROWS NOTHING HAS EVER DRESSED. The confirmation writes a label and a value per row β€” When / the date, Name / the name, Email / the address β€” and neither this sheet nor the one it replaced had a rule for any of the three classes it uses, so all six lines came out identical and the labels were indistinguishable from the answers. It matters more now than it did: three of the five pages end on this panel rather than moving to a welcome page, so for those bookers it is the last thing they see. Same failure as the management buttons that were used on five pages and styled nowhere. */ .confirm-summary .row{display:grid;grid-template-columns:88px minmax(0,1fr);gap:4px 12px;padding:6px 0} .confirm-summary .row + .row{border-top:1px solid var(--sand)} .confirm-summary .k{font-size:13px;opacity:.7} .confirm-summary .v{font-size:15px;overflow-wrap:anywhere} /* πŸ”΄ AND IT MUST NOT SHOUT OVER THE CARD'S OWN TITLE. The refusal's heading was set at the step-title size, 30px, directly under a 32px card title β€” two display serifs two pixels apart, which is not a hierarchy anybody perceives, and a routine "this link is missing something" sentence delivered at the size of a headline. It drops to the size the host's own name is set at. This is the only place on any of the five pages where those two ever sit adjacent. */ #panel-missing-context .step-title{font-size:25px;letter-spacing:-.3px;margin-bottom:12px} /* πŸ”΄ A REFUSAL THAT LOOKS LIKE NOTHING IS A PAGE THAT LOOKS BROKEN. One page β€” Dindin's client interview β€” shows a panel instead of a calendar when the link it was sent on carries no candidate, which is deliberate and is the only thing that visitor will ever see. Until this rule it was the single element on any of the five pages that this sheet did not dress, so it drew as an unstyled paragraph under a serif heading. The month grid's own version of this note is already styled under #dayGrid; this is the same note outside it. */ .picker .err-note{ font:400 15px/1.5 var(--sans); color:var(--ink); margin:0; border:2px solid var(--ink); border-radius:10px; padding:20px; } /* ── the sync-status note ──────────────────────────────────────────────────────────────── */ .banner{ border:1px solid var(--sand); border-radius:10px; padding:20px; font-size:15px; margin-bottom:20px; } .banner b{display:block;margin-bottom:4px} /* ── the timezone line, at the foot of the card ────────────────────────────────────────── */ .tz-bar{ border-top:1px solid var(--sand); padding-top:14px; margin-top:20px; font-size:13px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; } .picker .tzp-btn{ border:0; border-bottom:1px solid var(--sand); border-radius:0; background:none; padding:0 2px; min-height:44px; font:600 13px/1 var(--sans); color:var(--ink); gap:6px; } .picker .tzp-btn:hover{box-shadow:none;background:var(--paper)} .picker .tzp-btn:active{transform:none} .picker .tzp-btn .tzp-globe{display:none} .picker .tzp-panel{border:1px solid var(--sand);border-radius:16px} .picker .tzp-search{border:1px solid var(--sand);border-radius:10px;background:#fff;font-family:var(--sans)} .picker .tzp-search:focus{box-shadow:none;outline:2px solid var(--blue);outline-offset:2px} .picker .tzp-opt{font-family:var(--sans);font-weight:500} .picker .tzp-opt.is-current{background:var(--blue);border:0;color:#fff} .picker .tzp-opt.is-current .tzp-off{color:#fff} .picker .tzp-group{font-family:var(--sans);letter-spacing:.08em} .picker .tzp-foot{font-family:var(--sans)} /* ── THE PAGE A BOOKER REACHES FROM THEIR CONFIRMATION ─────────────────────────── πŸ”΄ IT WAS THE LAST PAGE ON THIS SITE IN THE OLD DESIGN, and it is one tap from every booking on all five pages: the blue "Reschedule or cancel" button goes here. Somebody who booked a call in cream and blue landed on an off-white page with a black hero band, a lilac blob and three typefaces from Google. Converting the five and leaving this one moves the seam rather than closing it, so it comes too. It is a single column rather than two β€” there is no pitch beside a booking somebody already has β€” and it borrows the picker's class so that the rules written under heavier .picker selectors, which exist to beat the shared modules' own injected styles, reach it as well. */ .manage{max-width:640px;margin:0 auto;padding:40px 0 48px} .manage .card + .card{margin-top:16px} .btn-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px} /* the one label on this page that is not inside the booking form's own stack */ .mgmt-label{display:block;font-size:14px;margin-top:16px} .mgmt-btn.danger{border-color:#A3341F;color:#A3341F;background:#fff} .mgmt-btn.danger:hover{background:#A3341F;color:#fff;border-color:#A3341F} .mgmt-btn.ghost{background:none;border-color:var(--sand)} /* the booking's own state, said once, in words rather than as a colour a reader has to decode */ .status-pill{ display:inline-block; border-radius:999px; padding:3px 12px; font-size:13px; text-transform:capitalize; border:1px solid var(--sand); } .status-pill.confirmed{background:var(--blue);border-color:var(--blue);color:#fff} .status-pill.cancelled{background:var(--sand)} /* the same two notes the booking pages use, outside the month grid they were scoped to */ .picker .ok-note{ font:400 16px/1.5 var(--sans); margin:0; border:1px solid var(--sand); border-radius:10px; padding:20px; background:var(--lime); } .picker > .card .loading,.manage .loading{font:400 15px/1.5 var(--sans);margin:0} /* a time in a list of times: the hour reads first, its zone underneath */ .slot-btn{flex-wrap:wrap} .slot-btn .t{font-weight:500} footer{ border-top:1px solid var(--sand); padding:20px 0 28px; font-size:12px; } /* ── narrower desktops ─────────────────────────────────────────────────────────────────── */ @media (max-width:1000px){ .pg{padding:0 24px} .split{grid-template-columns:minmax(0,1fr) minmax(360px,1fr);gap:20px 32px} .picker-head h1{font-size:30px} .lede{grid-template-columns:145px minmax(0,1fr);gap:16px} .portrait{max-width:145px} .lede h1{font-size:23px} .split.is-lean .lede h1{font-size:26px} .offer-lead{font-size:26px} .card{padding:16px} .stepper{gap:4px} .step-dot{gap:4px;font-size:11px} } /* ── phones. The picker leads; the pitch reads underneath it. ──────────────────────────── */ @media (max-width:800px){ .pg{padding:0 16px} .head{height:64px} .logo{width:196px} .split{ grid-template-columns:minmax(0,1fr); grid-template-areas:"picker" "promise" "host" "reassurance"; grid-template-rows:auto; gap:24px; padding:24px 0 32px; } .picker-head h1{font-size:30px;line-height:1.08;letter-spacing:-.8px;margin-bottom:0;max-width:22ch;text-wrap:initial} .card{padding:12px;border-radius:16px;margin:0 -4px} .stepper{padding-bottom:4px;margin-bottom:12px;gap:14px} .step-dot{font-size:10px;gap:4px} .step-title{font-size:27px;margin-bottom:12px} #dayGrid .cal-head{margin-bottom:8px} #dayGrid .cal-grid{gap:2px} #dayGrid .cal-cell{height:44px;min-height:44px} #dayGrid .cal-dow{height:24px} .tz-bar{margin-top:12px;padding-top:8px} .promise{font-size:17px;margin-top:4px} .offer-lead{font-size:28px;text-wrap:initial} /* the headline spans the width, the portrait sits to the right of the paragraph beneath it */ .lede{grid-template-columns:minmax(0,1fr) 156px;gap:20px 16px} .lede .said{display:contents} .portrait{max-width:156px;grid-column:2;grid-row:2} .lede h1{font-size:27px;grid-column:1/-1;grid-row:1;margin:0} /* the picker still leads on a phone; with no offer line the words simply follow it */ .split.is-lean{grid-template-areas:"picker" "host"} /* πŸ”΄ MEASURED AT 375: the shared phone layout puts the paragraph in the column left of the portrait, which is 171px wide. Nick's own blurb is 114 characters and fits in 128px of height, so it never showed there. Dean's kickoff copy is 299 characters and ran 384px tall in that ribbon; Dindin's screening copy is 324 and ran 410 β€” a thin grey strip taller than the whole calendar beside a small photograph floating in the middle of it. On a lean page the portrait therefore sits beside the HEADLINE and the paragraph runs the full width of the screen. */ .split.is-lean .lede{grid-template-columns:minmax(0,1fr) 120px;gap:16px} .split.is-lean .lede h1{grid-column:1;grid-row:1;align-self:center} .split.is-lean .portrait{max-width:120px;grid-column:2;grid-row:1} .split.is-lean .lede .said p{grid-column:1/-1;grid-row:2;align-self:start} /* margin:0 has to be restated: the base lean rule's bottom margin outranks the phone rule above on specificity, and on a phone the headline is placed by the grid, not by margins */ .split.is-lean .lede h1{font-size:28px;margin:0} .lede .said p{font-size:16px;grid-column:1;grid-row:2;align-self:center} .reassurance{font-size:16px;padding:20px} footer{font-size:11px} } @media (prefers-reduced-motion:reduce){*{scroll-behavior:auto}} /* ── WHAT A HOST TYPES HAS TO FIT ───────────────────────────────────────────────────────────── πŸ”΄ A PASTED LINK SCROLLED THE WHOLE PAGE SIDEWAYS. Since a host can write their own headline and their own lines under it, one long word with no spaces in it β€” a link, a hashtag, an email address β€” is now something a page has to survive. Measured before this rule existed: a 120 character unbroken string gave the headline a scroll width of 2121 against 343 on screen, and took the document with it. Nothing else in this review actually broke; this did. πŸ”΄ AND THE PORTRAIT NEEDS A CEILING, NOT A CROP. A host names a file and it can be any shape: a very tall one rendered 220 by 660 and pushed the headline a third of a page down. Nick's own ruling is that the portrait keeps its true proportion and is never cut, so this is a maximum height against a width and an automatic height β€” a tall photo comes down in proportion, nothing is cropped, and it never fires for a portrait the right shape (today's is 331 tall). */ .lede h1, .lede .said p, .picker-head h1, .reassurance{ overflow-wrap:anywhere; }