/* Ri Chèile: an editorial, scrapbook page. Serif capitals with mint highlighter, small sans notes, the logo's braid running on through the buckle. */
@font-face{font-family:'Archivo';font-style:normal;font-weight:100 900;font-stretch:62% 125%;font-display:swap;src:url(fonts/archivo-latin.woff2) format('woff2')}
@font-face{font-family:'Instrument Serif';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/instrument-serif-latin.woff2) format('woff2')}
@font-face{font-family:'Instrument Serif';font-style:italic;font-weight:400;font-display:swap;src:url(fonts/instrument-serif-latin-italic.woff2) format('woff2')}
@font-face{font-family:'Geist';font-style:normal;font-weight:100 900;font-display:swap;src:url(fonts/geist-latin.woff2) format('woff2')}

:root{
  --paper:#F0EDE4;
  --field:#F0EDE4;
  --sage:#D9E5DE;
  --sage-2:#C9D8CB;
  --green:#4C514B;
  --green-2:#5E645D;
  --ink-soft:#5F665F;
  --on-green:#F3F0E8;
  --on-green-soft:#BCCABE;
  --brass:#B08D57;
  --brass-hi:#C4A36E;
  --on-brass:#1F221F;
  --brass-ink:#7A5E22;
  --line:rgba(76,81,75,0.14);
  --line-strong:rgba(76,81,75,0.28);
  --danger:#A63D26;
  --display:'Archivo','Arial Narrow',sans-serif;
  --serif:'Instrument Serif',Georgia,serif;
  --mint:#BCD4C7;
  --sans:'Geist',system-ui,-apple-system,'Segoe UI',sans-serif;
  --r-lg:14px;
  --r:10px;
  --gutter:max(16px,4.5vw);
  --wrap:1240px;
  --space:clamp(88px,10vw,144px);
  --ease-out:cubic-bezier(0.16,1,0.3,1);
}

/* Base */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scrollbar-color:var(--sage-2) var(--paper)}
body{margin:0;background:var(--paper);color:var(--green);font-family:var(--sans);font-size:1.0625rem;line-height:1.6;-webkit-font-smoothing:antialiased;caret-color:var(--green)}
img{display:block;max-width:100%;height:auto}
h1,h2,h3{margin:0;font-weight:600;text-wrap:balance}
p{margin:0;text-wrap:pretty}
a{color:inherit;text-decoration-color:var(--line-strong);text-decoration-thickness:1px;text-underline-offset:0.22em}
a:hover{text-decoration-color:currentColor}
::selection{background:var(--sage-2);color:var(--green)}
:focus-visible{outline:2px solid var(--green);outline-offset:3px;border-radius:4px}
.skip{position:absolute;left:16px;top:-60px;z-index:20;background:var(--green);color:var(--on-green);padding:10px 16px;border-radius:var(--r);text-decoration:none}
.skip:focus{top:12px}
.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:var(--gutter)}

/* Type */
.display{font-family:var(--serif);font-weight:400;font-size:clamp(2.375rem,5.4vw,4.5rem);line-height:1.04;letter-spacing:-0.01em;text-transform:uppercase}
.h2{font-family:var(--serif);font-weight:400;font-size:clamp(2rem,3.6vw,3rem);line-height:1.05;text-transform:uppercase}
.h3{font-weight:600;font-size:1.1875rem;line-height:1.35;letter-spacing:-0.01em}
.lede{font-size:clamp(1.125rem,1.4vw,1.25rem);line-height:1.55}
.soft{color:var(--ink-soft)}
.prose{display:flex;flex-direction:column;gap:1.1em;max-width:34rem}
.serif-lg{font-family:var(--serif);font-size:clamp(1.5rem,2.5vw,2.125rem);line-height:1.22}
.star{margin:0 auto 18px;text-align:center;font-size:1.5rem;line-height:1}

/* Mint highlighter, swiped on as each line comes into view. The shape is torn tape: uneven ends, slightly tilted. */
mark{color:inherit;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 20' preserveAspectRatio='none'%3E%3Cpath d='M1 3 L4 1 L97 2 L99 5 L98 16 L100 19 L3 18 L0 15 Z' fill='%23BCD4C7'/%3E%3C/svg%3E") 0 55%/100% 92% no-repeat;padding:0 0.1em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
@media (prefers-reduced-motion:no-preference){
  .js mark{background-size:0% 92%;transition:background-size .8s var(--ease-out)}
  .js .is-in mark{background-size:100% 92%}
  .js .is-in mark + mark,.js .is-in mark ~ mark{transition-delay:.3s}
}

/* A brass ring drawn round a word by hand */
.circled{position:relative;white-space:nowrap}
.circled::after{content:"";position:absolute;inset:-0.2em -0.35em -0.12em;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 60' preserveAspectRatio='none'%3E%3Cpath d='M150 8C110-1 30 2 10 20-6 36 30 56 100 55c60-1 98-12 96-30C194 8 150 2 70 7' fill='none' stroke='%23B08D57' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat;pointer-events:none}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:12px 20px;font:500 1rem/1.2 var(--sans);text-decoration:none;color:var(--on-green);background:var(--green);border:0;border-radius:var(--r);cursor:pointer;transition:background-color .2s var(--ease-out),transform .2s var(--ease-out)}
.btn .ico{width:18px;height:18px;flex:none;transition:transform .3s var(--ease-out)}
.btn:hover{background:var(--green-2)}
.btn:hover .ico{transform:translateX(3px)}
.btn:active{transform:translateY(1px)}
.btn[disabled]{cursor:progress;background:var(--green-2)}
.btn-brass{background:var(--brass);color:var(--on-brass)}
.btn-brass:hover{background:var(--brass-hi)}
.btn-sm{min-height:42px;padding:9px 16px;font-size:0.9375rem}
.btn .short{display:none}
@media (max-width:479px){.btn .long{display:none}.btn .short{display:inline}}

/* Header: one line of small type across the top, as in a magazine */
.site-header{border-top:3px solid var(--brass)}
.site-header .wrap{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;min-height:52px;font-size:0.8125rem}
.brand{display:inline-flex;align-items:center;gap:8px;text-decoration:none;color:var(--green)}
.brand img{width:30px;height:24px}
.brand span{font-weight:600;white-space:nowrap}
.nav{display:flex;gap:28px}
.nav a{padding:6px 0;color:var(--ink-soft);text-decoration:none}
.nav a:hover{color:var(--green)}
.nav a[aria-current="page"]{color:var(--green);text-decoration:underline;text-decoration-color:var(--brass);text-decoration-thickness:2px;text-underline-offset:6px}
.site-header .status{justify-self:end;font-size:0.8125rem}
@media (max-width:599px){.site-header .wrap{grid-template-columns:1fr auto}.site-header .status{display:none}.brand span{display:none}}

/* Cover: the masthead, a highlighted statement, a small note, then the scrapbook */
.cover{padding-top:clamp(40px,6vw,80px)}
.masthead{display:flex;justify-content:center;align-items:baseline;gap:0.14em;margin:0;font-size:clamp(4.5rem,19vw,16.5rem);line-height:0.82;white-space:nowrap}
.masthead em{position:relative;z-index:1;font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-0.03em}
.masthead span{font-family:var(--display);font-stretch:100%;font-weight:800;letter-spacing:-0.06em}
.masthead-sm{font-size:clamp(3rem,10vw,8.5rem);text-transform:none}
.cover-place{margin-top:14px;text-align:center;font-size:0.75rem;color:var(--ink-soft)}
.cover .star{margin-top:clamp(48px,6vw,80px)}
.statement{max-width:21ch;margin-inline:auto;text-align:center}
.aside{display:flex;flex-direction:column;align-items:flex-start;gap:18px;max-width:20rem;margin:32px 0 0 calc(50% - 2rem);font-size:0.875rem;line-height:1.55}
.aside-center{align-items:center;margin-inline:auto;text-align:center;max-width:26rem}
@media (max-width:699px){.aside{margin-left:auto;margin-right:0}}
.status{display:inline-flex;align-items:center;gap:8px;color:var(--ink-soft)}
.status::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--brass)}

/* Scrapbook: two photos dropped at different heights */
.collage{display:flex;flex-wrap:wrap;justify-content:space-around;align-items:flex-start;gap:28px;margin-top:clamp(56px,8vw,112px)}
.snap{display:block;width:var(--w);height:auto;margin:var(--y) 0 0;border-radius:3px}
@media (max-width:599px){.snap{width:100%;margin-top:0}}

/* The rope: the logo's Celtic braid carried on across the page and through the buckle. One repeat of the braid
   (assets/braid-tile.svg) is 176 x 104 logo units; --u sets how big a logo unit is. When the rope comes into view,
   weave.js adds .is-out and both sides of the belt run out from the buckle to the edges of the page. */
.rope{--u:0.6px;position:relative;height:calc(320 * var(--u));margin-top:clamp(64px,8vw,112px);overflow:hidden}
.rope::before{content:"";position:absolute;left:0;right:0;top:50%;height:calc(104 * var(--u));margin-top:calc(-52 * var(--u));background:url(braid-tile.svg) center 0/calc(176 * var(--u)) 100% repeat-x}
.rope img{position:relative;display:block;width:calc(400 * var(--u));height:auto;margin:0 auto}
@media (prefers-reduced-motion:no-preference){
  .js .rope::before{clip-path:inset(0 50%);transition:clip-path 1.8s var(--ease-out) .15s}
  .js .rope.is-out::before{clip-path:inset(0 0)}
}
@media (max-width:599px){.rope{--u:0.45px}}


/* Paper speckle over the whole page, like the portrait's ground */
body::after{content:"";position:fixed;inset:0;z-index:100;background:url(grain.png) 0 0/220px;mix-blend-mode:overlay;opacity:0.32;pointer-events:none}

/* Sections */
.section{padding-top:var(--space)}

/* Letter: Eva's note, with her portrait annotated by hand */
.byline{margin-bottom:22px;text-align:center;font-size:0.8125rem;color:var(--ink-soft)}
.byline strong{color:var(--green);font-weight:600}
.me{position:relative;width:120px;margin:0}
.me img{width:100%;-webkit-mask-image:linear-gradient(#000 95%,transparent);mask-image:linear-gradient(#000 95%,transparent)}
.note{position:absolute;right:100%;top:30%;display:flex;align-items:center;gap:6px;margin-right:4px;font-family:var(--serif);font-style:italic;font-size:1.375rem;white-space:nowrap}
.note svg{width:64px;height:22px;color:var(--green)}
@media (max-width:699px){.side-note-me{margin-top:52px}.note{right:auto;left:0;top:-38px}.note svg{display:none}}
.letter-body{display:grid;gap:22px;max-width:54rem;margin:clamp(40px,5vw,64px) auto 0}
.indent{padding-left:clamp(24px,8vw,96px)}
.side-note{display:flex;flex-direction:column;gap:0.6em;justify-self:end;max-width:22rem;margin-top:18px;font-size:0.8125rem;line-height:1.55}
.side-note p + p{text-indent:1.6em}
.side-note-me{display:grid;grid-template-columns:120px minmax(0,1fr);column-gap:20px;max-width:28rem}
.side-note-me .me{grid-row:1 / span 3}
.side-note-me p{grid-column:2}
.side-note-wide{max-width:30rem;justify-self:start;margin-top:24px}

/* Stance: each tired offer struck out, with ours set beneath it */
.stance{list-style:none;max-width:44rem;margin:clamp(40px,5vw,64px) auto 0;padding:0;border-top:1px solid var(--line)}
.stance li{display:flex;flex-direction:column;align-items:center;gap:2px;padding:18px 0;border-bottom:1px solid var(--line);text-align:center}
.stance .not{font-size:0.8125rem;color:var(--ink-soft);text-decoration:line-through;text-decoration-color:var(--brass);text-decoration-thickness:2px}
.stance .yes{font-family:var(--serif);font-size:clamp(1.5rem,2.6vw,2.125rem);line-height:1.15}

/* How we work: four numbered notes under a hairline */
.steps{list-style:none;counter-reset:step;display:grid;gap:36px 32px;margin:clamp(40px,5vw,64px) 0 0;padding:0}
.steps li{counter-increment:step;display:flex;flex-direction:column;gap:10px;padding-top:16px;border-top:1px solid var(--green)}
.steps li::before{content:counter(step) ".";font-family:var(--serif);font-style:italic;font-size:2.75rem;line-height:1}
.steps .h3{font-family:var(--serif);font-weight:400;font-size:1.5rem;line-height:1.1;letter-spacing:0;text-transform:uppercase}
.steps p{color:var(--ink-soft);font-size:0.875rem}
@media (min-width:700px){.steps{grid-template-columns:1fr 1fr}}
@media (min-width:1080px){.steps{grid-template-columns:repeat(4,1fr)}}

/* The name */
.name-body{max-width:46rem;margin:clamp(48px,6vw,80px) auto 0}
.makes{list-style:none;margin:28px 0 0;padding:0;border-top:1px solid var(--line-strong);font-size:0.875rem}
.makes li{display:grid;grid-template-columns:6rem 1fr;gap:4px 16px;padding:10px 0;border-bottom:1px solid var(--line-strong)}
@media (max-width:479px){.makes li{grid-template-columns:1fr}}
.makes li > span:first-child{font-family:var(--serif);font-style:italic;font-size:1.125rem;line-height:1.3}

/* Closing */
.closing-action{display:flex;justify-content:center;margin-top:28px}

/* Footer */
.site-footer{border-top:1px solid var(--line);color:var(--ink-soft);font-size:0.9375rem;padding-block:48px 28px;margin-top:var(--space)}
.footer-top{display:grid;gap:32px;padding-bottom:32px}
@media (min-width:760px){.footer-top{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr)}}
.footer-top p{max-width:24rem;margin-top:14px}
.footer-col{display:flex;flex-direction:column;gap:8px}
.footer-col strong{font-weight:600;color:var(--green)}
.footer-col a{text-decoration:none}
.footer-col a:hover{color:var(--green);text-decoration:underline}
.footer-base{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;padding-top:20px;border-top:1px solid var(--line);font-size:0.8125rem}

/* Enquire */
.enquire{padding-top:clamp(56px,7vw,96px)}
.enquire-grid{display:grid;gap:clamp(48px,6vw,88px)}
@media (min-width:980px){.enquire-grid{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);align-items:start}.contact{position:sticky;top:96px}}
.enquire-head{display:flex;flex-direction:column;gap:20px;margin-bottom:clamp(36px,4vw,52px);max-width:40rem}
.direct{font-size:0.9375rem}
@media (min-width:980px){.direct{display:none}}
.form{display:grid;gap:22px}
.form .row{display:grid;gap:22px}
@media (min-width:640px){.form .row{grid-template-columns:1fr 1fr}}
.field{display:flex;flex-direction:column;gap:8px}
.field label{font-weight:500;font-size:0.9375rem}
.field label .opt{font-weight:400;color:var(--ink-soft)}
.field input,.field select,.field textarea{width:100%;font:400 1.0625rem/1.4 var(--sans);color:var(--green);background:var(--field);border:1px solid var(--line-strong);border-radius:var(--r);padding:12px 14px;transition:border-color .15s,box-shadow .15s}
.field textarea{resize:vertical;min-height:8.5em}
.field select{appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:42px;background:var(--field) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 8l5 5 5-5' fill='none' stroke='%234C514B' stroke-width='1.6'/%3E%3C/svg%3E") right 14px center/16px no-repeat}
.field input::placeholder,.field textarea::placeholder{color:var(--ink-soft);opacity:1}
.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--green)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px rgba(76,81,75,0.16)}
.field .err{display:none;font-size:0.875rem;color:var(--danger)}
.field.invalid input,.field.invalid select,.field.invalid textarea{border-color:var(--danger);box-shadow:0 0 0 3px rgba(166,61,38,0.14)}
.field.invalid .err{display:block}
.trap{position:absolute;left:-9999px}
.form-foot{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px;margin-top:6px}
.form-foot p{font-size:0.875rem}
.status-msg{font-size:0.9375rem;padding:14px 16px;border-radius:var(--r);border:1px solid var(--line-strong)}
.status-msg[hidden]{display:none}
.status-msg.is-error{background:#F7E7E1;border-color:rgba(166,61,38,0.3);color:#7E2D1B}
.sent{display:flex;flex-direction:column;gap:12px;padding-top:24px;border-top:1px solid var(--green)}
.sent:focus{outline:none}

.contact{display:flex;flex-direction:column;gap:24px;padding-top:24px;border-top:1px solid var(--green)}
.contact-who{display:flex;flex-direction:column;gap:8px}
.contact h2{font-family:var(--serif);font-weight:400;font-size:2rem;line-height:1.05}
.facts{margin:0;border-top:1px solid var(--line-strong)}
.facts div{display:grid;grid-template-columns:6.5rem 1fr;gap:12px;padding:12px 0;border-bottom:1px solid var(--line-strong)}
.facts dt{color:var(--ink-soft)}
.facts dd{margin:0;overflow-wrap:anywhere}

/* Privacy */
.policy{max-width:42rem;margin:0 auto;padding-top:clamp(48px,6vw,88px)}
.policy .display{text-align:center;margin-bottom:12px}
.policy .updated{text-align:center;font-size:0.8125rem;color:var(--ink-soft);margin-bottom:clamp(40px,5vw,64px)}
.policy h2{margin:44px 0 12px;font-family:var(--serif);font-weight:400;font-size:1.75rem;line-height:1.1}
.policy p,.policy li{color:var(--ink-soft)}
.policy p + p{margin-top:0.9em}
.policy ul{margin:0.6em 0 0;padding-left:1.2em}
.policy li + li{margin-top:0.35em}