/* The Exit Society — shared styles for the homepage and the Apply page.
   "White by day, red by night". */
  /* "White by day, red by night" */
  :root{
    --lime:#FFFFFF;      /* main ground: pure white */
    --linen:#E8E7E5;     /* occasional panels: soft grey */
    --ink:#141111;       /* text */
    --ink-soft:#4A4442;  /* secondary text: 9.0:1 on lime */
    --chilli:#C2321F;    /* the single accent: 5.0:1 on lime */
    --oxblood:#5E1414;   /* the one after-dark section */
    --rose:#E9A99B;      /* small labels on oxblood only */

    --serif:'Instrument Serif', Georgia, 'Times New Roman', serif;
    --sans:'Hanken Grotesk', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;

    --edge:clamp(24px, 6vw, 104px);
    --max:1280px;
    /* One spacing scale for the whole page:
       label -> headline 20px; --sp-m between headline, text and lists;
       --sp-l before a group of photographs or a closing line;
       --section between sections (equal either side of every rule). */
    --sp-m:clamp(28px, 3.4vw, 44px);
    --sp-l:clamp(56px, 7vw, 104px);
    --section:clamp(64px, 8vw, 128px);
    color-scheme:light;
  }

  *{box-sizing:border-box;}
  html{-webkit-text-size-adjust:100%;}
  body{
    margin:0; background:var(--lime); color:var(--ink);
    font-family:var(--sans); font-size:17px; line-height:1.62; font-weight:400;
    -webkit-font-smoothing:antialiased; overflow-x:hidden;
  }
  img{display:block; max-width:100%;}
  a{color:var(--chilli); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px;}
  ::selection{background:var(--ink); color:var(--lime);}
  :focus-visible{outline:1px solid var(--chilli); outline-offset:4px;}

  .wrap{max-width:var(--max); margin:0 auto; padding:0 var(--edge);}
  .rule{height:0; border:0; border-top:1px solid var(--ink); margin:0;}

  /* ---------- Type ---------- */
  .label{
    font-family:var(--sans); font-size:12px; font-weight:500;
    letter-spacing:0.18em; text-transform:uppercase; line-height:1.4;
    margin:0;
  }
  h1, h2, .serif{
    font-family:var(--serif); font-weight:400; margin:0;
    letter-spacing:-0.012em; text-wrap:balance;
  }
  h1{font-size:clamp(48px, 9.2vw, 112px); line-height:0.95;}
  h2{font-size:clamp(38px, 5.6vw, 72px); line-height:1.0;}
  h1 em, h2 em{font-style:italic;}
  .red{color:var(--chilli);}
  p{margin:0 0 1em;}
  .measure{max-width:34em;}
  .muted{color:var(--ink-soft);}

  /* Lines set in the serif — the site's recurring "list of short sentences" */
  .lines{list-style:none; margin:0; padding:0; font-family:var(--serif); font-size:clamp(24px, 2.6vw, 32px); line-height:1.2;}
  .lines li{padding:14px 0; border-top:1px solid var(--ink);}
  .lines li:last-child{border-bottom:1px solid var(--ink);}

  /* ---------- Buttons (square, flat) ---------- */
  .btn{
    display:inline-block; font-family:var(--sans); font-size:12.5px; font-weight:500;
    letter-spacing:0.18em; text-transform:uppercase; text-decoration:none;
    padding:18px 28px; border:1px solid var(--chilli);
    background:var(--chilli); color:var(--lime); cursor:pointer;
  }
  .btn:hover{background:var(--ink); border-color:var(--ink);}
  .text-link{
    font-size:12.5px; font-weight:500; letter-spacing:0.18em; text-transform:uppercase;
    color:var(--ink); text-decoration:underline; text-underline-offset:6px;
  }

  /* ---------- Photography ---------- */
  figure{margin:0;}
  .ph img{width:100%; height:100%; object-fit:cover;}
  .bw img{filter:grayscale(1) contrast(1.06);}   /* default treatment */
  figcaption{margin-top:12px; color:var(--ink-soft);}

  /* ---------- Header ---------- */
  .site-header{
    position:sticky; top:0; z-index:50; background:var(--lime);
    border-bottom:1px solid transparent;
  }
  .site-header.scrolled{border-bottom-color:rgba(20,17,17,0.14);}
  .site-header .wrap{display:flex; align-items:center; justify-content:space-between; height:72px;}
  .brand img{height:42px; width:auto;}
  .nav{display:flex; gap:clamp(18px, 2.4vw, 36px); align-items:center;}
  .nav a{color:var(--ink); text-decoration:none;}
  .nav a:hover{text-decoration:underline; text-underline-offset:6px;}
  .nav a.enquire{color:var(--chilli);}
  .menu-btn{display:none; background:none; border:0; padding:8px 0; color:var(--ink); cursor:pointer;}
  .mobile-menu{display:none;}

  /* ---------- Hero ---------- */
  .hero{padding-top:var(--sp-l); padding-bottom:var(--section);}
  .hero-grid{display:grid; grid-template-columns:7fr 5fr; gap:clamp(32px, 5vw, 80px); align-items:start;}
  .hero h1{margin:0 0 var(--sp-m);}
  .hero .sub{font-size:19px; line-height:1.55; max-width:30em;}
  .hero .actions{display:flex; flex-wrap:wrap; gap:20px 32px; align-items:center; margin-top:var(--sp-m);}
  .hero .ph{aspect-ratio:4/5;}

  /* Inner-page title: the hero h1 at a size suited to a longer line */
  .page-title{font-size:clamp(44px, 6.2vw, 84px); line-height:1.0;}
  .hero .label + h1{margin-top:20px;}

  /* ---------- Access ---------- */
  .access{padding-top:var(--section); padding-bottom:var(--section);}
  .access-grid{display:grid; grid-template-columns:5fr 1fr 6fr; gap:0;}
  .access-grid > :last-child{grid-column:3;}
  .access .lines{margin:var(--sp-m) 0;}

  /* ---------- Society + row of three ---------- */
  .society{padding-top:var(--section); padding-bottom:var(--section);}
  .society-head{display:grid; grid-template-columns:4fr 8fr; gap:clamp(24px, 4vw, 64px);}
  .society-head h2{margin:20px 0 var(--sp-m);}
  .triptych{
    display:grid; grid-template-columns:1fr 1.25fr 1fr; gap:clamp(16px, 3vw, 48px);
    margin-top:var(--sp-l); align-items:start;
  }
  .triptych .ph{aspect-ratio:4/5;}
  .triptych .t2{margin-top:var(--sp-l);}
  .society-close{display:grid; grid-template-columns:4fr 8fr; gap:clamp(24px, 4vw, 64px); margin-top:var(--sp-l);}
  .society-close p.serif{font-size:clamp(26px, 3vw, 38px); line-height:1.15; margin:0; max-width:22em;}

  /* ---------- Dusk band ---------- */
  .dusk .ph{aspect-ratio:16/9;}
  .dusk .ph img{object-position:50% 60%;}
  .dusk figcaption{padding:0 var(--edge);}

  /* ---------- After dark (the only oxblood section) ----------
     Headline, then two columns of text, then the two photographs as a
     matched pair across the full width, then the closing line. */
  .after-dark{background:var(--oxblood); color:var(--lime); padding:var(--section) 0;}
  .after-dark .label{color:var(--rose);}
  .after-dark a{color:var(--lime);}
  .after-dark h2{margin:20px 0 var(--sp-m); max-width:13em;}
  .dark-cols{display:grid; grid-template-columns:5fr 1fr 6fr; align-items:start;}
  .dark-cols > :last-child{grid-column:3;}
  .after-dark .lines li{border-color:rgba(255,255,255,0.3);}
  .pair{display:grid; grid-template-columns:1fr 1fr; gap:clamp(12px, 2vw, 28px); margin-top:var(--sp-l);}
  .pair .ph{aspect-ratio:4/5;}
  .after-dark .closing{font-family:var(--serif); font-style:italic; font-size:clamp(28px, 3.4vw, 44px); line-height:1.1; margin:var(--sp-m) 0 0; text-align:center;}

  /* ---------- Private Search (linen panel) ---------- */
  .search{background:var(--linen); padding:var(--section) 0;}
  .search-grid{display:grid; grid-template-columns:6fr 1fr 5fr;}
  .search-grid > :last-child{grid-column:3; padding-top:8px;}
  .search h2{margin:20px 0 0;}
  .search .lines{margin:var(--sp-m) 0 0;}
  .big-line{
    font-family:var(--serif); font-size:clamp(40px, 6vw, 80px); line-height:1.0;
    margin:var(--sp-l) 0 16px; text-wrap:balance;
  }
  .search .cta-row{display:flex; flex-wrap:wrap; gap:20px 32px; align-items:center; margin-top:var(--sp-m);}

  /* ---------- Arrangements ---------- */
  .arrangements{padding-top:var(--section); padding-bottom:var(--section);}
  .arr-head{display:grid; grid-template-columns:8fr 4fr; gap:32px; align-items:end;}
  .arr-head p.cities{font-family:var(--serif); font-style:italic; font-size:clamp(22px, 2.2vw, 28px); line-height:1.25; margin:0;}
  .index{
    list-style:none; padding:0; margin:var(--sp-l) 0 0;
    display:grid; grid-template-columns:repeat(5, 1fr);
    border-top:1px solid var(--ink); border-bottom:1px solid var(--ink);
  }
  .index li{padding:22px 0; font-family:var(--serif); font-size:clamp(24px, 2.4vw, 32px); line-height:1.1;}
  .index li + li{border-left:1px solid var(--ink); padding-left:20px;}
  .arr-note{font-size:clamp(22px, 2.2vw, 28px); line-height:1.2; margin:0;}
  .arr-foot{display:grid; grid-template-columns:4fr 8fr; gap:clamp(24px, 4vw, 64px); margin-top:var(--sp-m);}

  /* ---------- Who ---------- */
  .who{padding-top:var(--section); padding-bottom:0;}   /* the list's last line closes it; Begin Privately supplies the gap */
  .who-grid{display:grid; grid-template-columns:5fr 1fr 6fr;}
  .who-grid > :last-child{grid-column:3;}
  .who h2{margin:20px 0 var(--sp-m);}
  .qualities{list-style:none; padding:0; margin:0;}
  .qualities li{display:grid; grid-template-columns:48px 1fr; padding:16px 0; border-top:1px solid var(--ink); font-family:var(--serif); font-size:clamp(24px, 2.4vw, 30px); line-height:1.15;}
  .qualities li:last-child{border-bottom:1px solid var(--ink);}
  .qualities .n{font-family:var(--sans); font-size:12px; letter-spacing:0.18em; padding-top:8px; color:var(--ink-soft);}

  /* ---------- Begin Privately (homepage close) ---------- */
  .close-grid{display:grid; grid-template-columns:5fr 1fr 6fr; align-items:end;}
  .close-grid > :last-child{grid-column:3;}
  .close-grid .actions{display:flex; flex-wrap:wrap; gap:20px 32px; align-items:center; margin-top:8px;}
  /* ---------- Apply page ---------- */
  .apply-page .begin{padding-top:var(--sp-l);}
  /* ---------- Form ---------- */
  .begin{padding-top:var(--section); padding-bottom:var(--section);}
  .begin-grid{display:grid; grid-template-columns:5fr 1fr 6fr;}
  .begin-grid > :last-child{grid-column:3;}
  .begin h2{margin:20px 0 var(--sp-m);}
  form{display:grid; grid-template-columns:1fr 1fr; gap:28px 24px;}
  .field{display:flex; flex-direction:column; gap:8px; min-width:0;}
  .field.full{grid-column:1 / -1;}
  .field label, legend{font-size:12px; font-weight:500; letter-spacing:0.18em; text-transform:uppercase;}
  input[type=text], input[type=email], input[type=tel], textarea{
    font:inherit; font-size:17px; color:var(--ink); background:transparent;
    border:0; border-bottom:1px solid var(--ink); border-radius:0; padding:10px 0; outline:none;
  }
  input:focus, textarea:focus{border-bottom-color:var(--chilli);}
  input::placeholder, textarea::placeholder{color:#8C8481;}
  textarea{resize:vertical; min-height:84px;}
  fieldset{border:0; padding:0; margin:0; min-width:0;}
  legend{padding:0;}
  .choices{display:flex; flex-wrap:wrap; gap:12px 28px; padding-top:14px;}
  .field .choices label{display:flex; gap:10px; align-items:center; font-size:16px; font-weight:400; letter-spacing:0; text-transform:none;}
  .choices input{accent-color:var(--chilli); width:16px; height:16px; margin:0;}
  .help{font-size:14px; color:var(--ink-soft); margin:0;}
  .submit-row{grid-column:1 / -1; display:flex; flex-direction:column; align-items:flex-start; gap:18px; margin-top:8px;}
  .consent{font-size:14px; color:var(--ink-soft); max-width:46ch; margin:0;}
  .form-confirm, .form-error{display:none; font-size:15px; border-top:1px solid var(--ink); padding-top:16px; margin:0; max-width:46ch;}
  .form-error{color:var(--chilli); border-top-color:var(--chilli);}
  .form-confirm.show, .form-error.show{display:block;}
  .form-missing{display:none; font-size:15px; color:var(--chilli); margin:0;}
  .form-missing.show{display:block;}
  .field.invalid > label, .field.invalid > legend{color:var(--chilli);}
  .field.invalid input[type=text], .field.invalid input[type=email], .field.invalid input[type=tel], .field.invalid textarea{border-bottom-color:var(--chilli);}
  .field.invalid .choices input{outline:1px solid var(--chilli); outline-offset:2px; border-radius:50%;}
  .thanks{padding-top:8px;}
  .thanks[hidden], form[hidden]{display:none;}
  .thanks-title{font-family:var(--serif); font-size:clamp(48px, 7vw, 88px); line-height:1; margin:20px 0 var(--sp-m);}
  .thanks .text-link{display:inline-block; margin-top:8px;}
  .hp-field{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden;}
  .btn:disabled{opacity:.6; cursor:default;}

  /* ---------- Terms ---------- */
  .legal-link{background:none; border:0; padding:0; cursor:pointer; color:var(--ink-soft); text-decoration:underline; text-underline-offset:3px;}
  .modal{position:fixed; inset:0; z-index:200; background:rgba(20,17,17,0.6); display:none; align-items:center; justify-content:center; padding:24px;}
  .modal.open{display:flex;}
  .modal-box{background:var(--lime); max-width:560px; width:100%; max-height:80vh; overflow-y:auto; padding:48px 40px 40px; position:relative; border-top:2px solid var(--chilli);}
  .modal-box h3{font-family:var(--serif); font-weight:400; font-size:36px; line-height:1; margin:0 0 20px;}
  .modal-box p{color:var(--ink-soft);}
  .modal-close{position:absolute; top:16px; right:20px; background:none; border:0; cursor:pointer; color:var(--ink);}

  /* ---------- Footer ---------- */
  footer{padding:0 0 40px;}
  .foot-grid{display:grid; grid-template-columns:5fr 7fr; gap:40px; align-items:end;}
  .foot-grid .serif{font-size:clamp(30px, 3.6vw, 48px); line-height:1.05; margin:24px 0 0;}
  .foot-nav{display:flex; flex-wrap:wrap; gap:14px 28px; justify-content:flex-end;}
  .foot-nav a{color:var(--ink); text-decoration:none;}
  .foot-bottom{display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px 24px; margin-top:var(--sp-l); padding-top:20px; border-top:1px solid var(--ink); color:var(--ink-soft);}
  .foot-bottom a{color:var(--ink-soft);}

  /* =========================================================
     Phone first-class: below 900px everything stacks
     ========================================================= */
  @media (max-width: 900px){
    body{font-size:16.5px;}
    .nav{display:none;}
    .header-right{display:flex; gap:22px; align-items:center;}
    .menu-btn{display:block;}
    .mobile-menu{
      display:none; border-top:1px solid var(--ink); background:var(--lime);
      padding:8px var(--edge) 24px;
    }
    .mobile-menu.open{display:block;}
    .mobile-menu a{display:block; padding:16px 0; border-bottom:1px solid rgba(20,17,17,0.18); color:var(--ink); text-decoration:none; font-family:var(--serif); font-size:28px; line-height:1.1;}
    .mobile-menu a:last-child{border-bottom:0;}

    .site-header .wrap{height:64px;}
    .brand img{height:36px;}

    .hero-grid, .access-grid, .society-head, .society-close,
    .search-grid, .arr-head, .arr-foot, .who-grid, .begin-grid, .foot-grid{
      grid-template-columns:1fr; gap:0;
    }
    .access-grid > :last-child, .search-grid > :last-child,
    .who-grid > :last-child, .begin-grid > :last-child{grid-column:1;}

    /* hero: headline, then the photograph edge to edge */
    .hero .sub{font-size:17.5px;}
    .hero .ph{margin:var(--sp-l) calc(var(--edge) * -1) 0;}
    .hero figcaption{padding:0 var(--edge);}

    .access-grid h2{margin-bottom:var(--sp-m);}

    /* the row of three becomes one wide over two side by side */
    .triptych{grid-template-columns:1fr 1fr; gap:12px;}
    .triptych .t2{grid-column:1 / -1; grid-row:1; margin-top:0; aspect-ratio:4/3;}
    .triptych .t1{grid-row:2;}
    .triptych .t3{grid-row:2;}
    .society-close .label{margin-bottom:16px;}

    .dusk .ph{aspect-ratio:4/3;}

    .dark-cols{grid-template-columns:1fr;}
    .dark-cols > :last-child{grid-column:1; margin-top:var(--sp-m);}
    /* the pair runs edge to edge on a phone so each photograph keeps some size */
    .pair{margin-left:calc(var(--edge) * -1); margin-right:calc(var(--edge) * -1); gap:4px;}

    .search-grid > :last-child{padding-top:0; margin-top:var(--sp-m);}

    .arr-head p.cities{margin-top:var(--sp-m);}
    .index{grid-template-columns:1fr 1fr; border-bottom:0;}
    .index li{border-bottom:1px solid var(--ink); padding:18px 0;}
    .index li + li{border-left:0; padding-left:0;}
    .index li:nth-child(even){border-left:1px solid var(--ink); padding-left:16px;}
    .index li:last-child{grid-column:1 / -1;}
    .arr-note{margin-bottom:16px;}

    .qualities{margin-top:var(--sp-m);}

    form{grid-template-columns:1fr; gap:26px;}
    .begin-grid > :last-child{margin-top:var(--sp-m);}

    .close-grid{grid-template-columns:1fr;}
    .close-grid > :last-child{grid-column:1; margin-top:var(--sp-m);}
    .foot-nav{justify-content:flex-start; margin-top:var(--sp-m);}
  }
  @media (min-width: 901px){ .header-right .menu-btn{display:none;} .header-right .enquire-sm{display:none;} }