/* WEB-03 / V03 2026-11: homepage-only mobile composition.
   Shared/desktop stylesheet and About page are never edited. */
.web03-mobile-home {display:none;}

@media (max-width:720px) {
  .home .desktop-home { display:none; }
  .home { height:100%; overflow:hidden; }
  .web03-mobile-home {
    --m-ink:#1C1B1A;
    --m-paper:#F5F3EE;
    --m-pale:#DADFCB;
    --m-green:#2F5C47;
    --m-pad:clamp(30px,8vw,40px);
    display:flex;
    flex-direction:column;
    position:fixed; inset:0;
    width:100%; height:100vh; height:100dvh;
    overflow:hidden;
    isolation:isolate;
    background:var(--m-paper);
    color:var(--m-ink);
    font-family:"Signifier",Georgia,serif;
    font-style:normal;
  }
  .web03-mobile-home :is(a,button):focus-visible {outline:1px solid var(--m-ink); outline-offset:5px;}
  .web03-site-header {
    pointer-events:none;
    position:absolute; z-index:5;
    top:0; left:0; right:0;
    padding:calc(31px + env(safe-area-inset-top)) var(--m-pad) 0;
  }
  .web03-header-row {
    pointer-events:auto;
    min-height:55px;
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:8px;
    border-bottom:1px solid rgba(28,27,26,.83);
  }
  .web03-header-brand,
  .web03-top-nav a {
    color:var(--m-ink);
    display:inline-flex;
    padding:0;
    margin:0;
    align-items:center;
    height:36px;
    line-height:1;
    white-space:nowrap;
    background:none;
    border:none;
    font-family:inherit;
    font-weight:400;
    letter-spacing:-.012em;
    text-transform:none;
    font-size:clamp(1.13rem,4.7vw,1.4rem);
  }
  .web03-header-brand {cursor:pointer; transition:opacity .16s ease;}
  .web03-mobile-home[data-active-page="0"] .web03-header-brand {opacity:0; pointer-events:none;}
  .web03-top-nav {display:flex;justify-content:flex-end;align-items:center;gap:clamp(20px,5.5vw,26px);}
  .web03-top-nav .web03-nav-journal {font-style:italic;}
  .web03-top-nav a:hover, .web03-header-brand:hover {text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:5px;}

  .web03-pages {
    display:flex;
    flex:1 1 auto;min-height:0;width:100%;
    overflow-x:auto;overflow-y:hidden;
    scroll-snap-type:x mandatory;
    scroll-behavior:smooth;
    overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .web03-pages::-webkit-scrollbar, .web03-page::-webkit-scrollbar {display:none;}
  .web03-page {
    position:relative;
    flex:0 0 100%; width:100%; min-width:0;
    height:100%;
    overflow-x:hidden;overflow-y:auto;
    overscroll-behavior-y:contain;
    scrollbar-width:none;
    scroll-snap-align:start;
    scroll-snap-stop:always;
    padding:calc(96px + env(safe-area-inset-top)) var(--m-pad) calc(74px + env(safe-area-inset-bottom));
  }
  /* Page 01: return typographic authority to Signifier Regular, in black. */
  .web03-recognition {display:flex;align-items:stretch;}
  .web03-recognition-content {
    width:100%;min-height:100%;
    display:flex;flex-direction:column;justify-content:center;
    padding-bottom:clamp(0px,5vh,38px);
  }
  .home .web03-mobile-home .web03-display {
    color:var(--m-ink);
    font-family:inherit; font-style:normal; font-weight:400;
    font-size:clamp(5.2rem,25.1vw,7.4rem);
    letter-spacing:-.065em;
    line-height:.875;
    margin:0;
    white-space:nowrap;
  }
  .web03-intro {
    color:var(--m-ink);
    max-width:325px;
    font-style:normal;
    font-weight:400;
    font-size:clamp(1.24rem,5.5vw,1.5rem);
    line-height:1.29;
    letter-spacing:-.021em;
    margin:clamp(34px,6.7vh,58px) 0 0;
  }
  /* Page 02: editorial small-cap reading, not coloured display headings. */
  .web03-orientation {display:flex;align-items:center;padding-inline:clamp(44px,11vw,57px);}
  .web03-practices {width:100%;display:grid;align-content:center;gap:clamp(38px,6.7vh,60px);padding-top:16px;}
  .web03-practice {
    position:relative;
    margin:0;
    padding:0 0 0 clamp(29px,7.3vw,37px);
    min-width:0;
  }
  .web03-practice::before {
    content:"";
    position:absolute; top:0;left:0;bottom:0;
    width:1px;
    background:linear-gradient(180deg,rgba(47,92,71,.65) 0%,rgba(218,223,203,.64) 84%,rgba(218,223,203,0) 100%);
  }
  .web03-practice h2 {
    margin:0 0 11px;
    color:var(--m-ink);
    font-family:inherit;
    font-size:clamp(1.14rem,5.1vw,1.44rem);
    font-weight:400; font-style:normal;
    text-transform:uppercase;
    letter-spacing:.075em;
    line-height:1.12;
  }
  .web03-practice p {
    color:var(--m-ink);
    max-width:274px;
    margin:0;
    font-size:clamp(1.12rem,4.65vw,1.3rem);
    line-height:1.36;
    letter-spacing:-.01em;
  }
  /* Page 03: Journal remains expressive, but ink-led; watercolour sampled
     from the user-approved WEB-02 reference. No generated CSS wash. */
  .web03-invitation {padding-inline:clamp(34px,9vw,46px);}
  .web03-invitation-content {
    width:100%; min-height:100%;
    display:grid;grid-template-rows:67% 33%;
  }
  .web03-journal {
    position:relative;
    display:block;
    min-width:0; width:100%;
    align-self:center;
    padding:clamp(41px,9vh,70px) 5px 0 8px;
    color:var(--m-ink);
  }
  .web03-wash {
    position:absolute;
    top:0;
    left:-6%;
    width:112%;
    height:clamp(145px,22vh,196px);
    background:url("assets/art/web02-watercolour-extracted.png") center center / 100% 100% no-repeat;
    pointer-events:none;
    opacity:.82;
  }
  .web03-journal-title {
    position:relative; z-index:1;
    display:block;
    font-family:inherit;
    color:var(--m-ink);
    font-weight:400; font-style:italic;
    font-size:clamp(3.15rem,14.1vw,4.2rem);
    line-height:1.02;
    letter-spacing:-.045em;
  }
  .web03-journal-description {
    position:relative; z-index:1; display:block;
    max-width:300px;
    margin-top:clamp(17px,2.6vh,24px);
    color:var(--m-ink);
    font-size:clamp(1.16rem,5vw,1.35rem);
    line-height:1.33;
    letter-spacing:-.01em;
  }
  .web03-journal:hover .web03-journal-title {text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:7px;}
  .web03-enquiries {
    border-top:1px solid rgba(28,27,26,.83);
    padding:clamp(32px,5.1vh,47px) 4px 0;
    display:flex; flex-direction:column; align-items:flex-start;
    gap:15px; min-width:0;
  }
  .web03-enquiries-label {
    color:var(--m-ink);
    font-family:inherit;
    font-style:normal;
    font-weight:400;
    font-size:.83rem;
    line-height:1.1;
    text-transform:uppercase;
    letter-spacing:.145em;
  }
  .web03-enquiries a {
    display:inline-flex; align-items:center; min-height:36px;
    color:var(--m-ink);
    font-size:clamp(1.12rem,5.1vw,1.35rem);
    line-height:1.28;
    max-width:100%;overflow-wrap:anywhere;
    text-decoration:underline;
    text-decoration-color:var(--m-ink);
    text-decoration-thickness:1px;
    text-underline-offset:5px;
  }
  /* A visual three-stroke indicator (buttons retain accessible 44px targets). */
  .web03-progress {
    position:absolute; z-index:6;
    display:flex; justify-content:center;align-items:center;
    gap:3px;
    left:50%;transform:translateX(-50%);
    bottom:max(13px,env(safe-area-inset-bottom));
    height:44px;
  }
  .web03-progress-button {
    width:44px; height:44px;
    display:grid;place-items:center;
    padding:0; margin:0;cursor:pointer;
    border:0;background:transparent;
    appearance:none;
    border-radius:0;
  }
  .web03-progress-button > span {
    display:block;
    width:1.5px;height:30px;
    background:#AFB4AE;
    opacity:.65;
    transition:opacity .18s ease,background-color .18s ease;
  }
  .web03-progress-button[aria-current="step"] > span {background:var(--m-ink);opacity:1;}
  .web03-live {position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;}
}
@media (max-width:720px) and (max-height:660px) {
  .web03-page {padding-top:calc(77px + env(safe-area-inset-top));padding-bottom:calc(63px + env(safe-area-inset-bottom));}
  .web03-site-header {padding-top:calc(20px + env(safe-area-inset-top));}
  .web03-header-row {min-height:48px;}
  .home .web03-mobile-home .web03-display {font-size:clamp(4.6rem,23vw,6rem);}
  .web03-intro {margin-top:26px;font-size:clamp(1.12rem,5.2vw,1.33rem);}
  .web03-practices {gap:clamp(19px,4.1vh,32px);padding-top:5px;}
  .web03-practice h2 {margin-bottom:6px;font-size:clamp(1.02rem,4.8vw,1.2rem);}
  .web03-practice p {font-size:clamp(.99rem,4.2vw,1.14rem);line-height:1.27;}
  .web03-invitation-content {grid-template-rows:64% 36%;}
  .web03-journal {padding-top:34px;}
  .web03-wash {height:135px;}
  .web03-journal-title {font-size:clamp(2.9rem,13vw,3.6rem);}
  .web03-journal-description {margin-top:12px;font-size:clamp(1.08rem,4.7vw,1.25rem);}
  .web03-enquiries {padding-top:22px;gap:8px;}
}
@media (prefers-reduced-motion:reduce) {
  .web03-pages {scroll-behavior:auto;}
  .web03-progress-button > span,.web03-header-brand {transition:none;}
}

/* WEB-03 / v03 controlled refinements, isolated from desktop and About. */
@media (max-width:720px) {
  /* Understated green line: fades in and strengthens towards the links. */
  .web03-header-row { border-bottom-color:transparent; position:relative; }
  .web03-header-row::after {content:""; height:1px;position:absolute;left:0;right:0;bottom:0;pointer-events:none;background:linear-gradient(90deg,rgba(47,92,71,.07) 0%,rgba(47,92,71,.26) 52%,rgba(47,92,71,.73) 100%);}

  /* Real approved #11 formal wordmark, not reconstructed with type. */
  .web03-recognition-content { justify-content:center; padding-top:clamp(62px,9.4vh,94px); padding-bottom:0; }
  .home .web03-mobile-home .web03-logo-heading {margin:0;line-height:0;max-width:100%;font-size:initial;}
  .web03-hero-logo {display:block;width:100%;height:auto;max-height:none;object-fit:contain;}
  .web03-intro { max-width:290px;font-size:clamp(1.30rem,5.35vw,1.55rem);line-height:1.32;letter-spacing:-.008em;margin-top:clamp(43px,6.5vh,58px);}

  /* Progress rules: clickable 44-pixel targets; no decorative dot UI. */
  .web03-progress { gap:0; bottom:max(13px,env(safe-area-inset-bottom)); }
  .web03-progress-button { width:52px; height:44px; }
  .web03-progress-button > span {width:34px;height:2px;background:linear-gradient(90deg,rgba(218,223,203,.85),rgba(47,92,71,.33));opacity:1;transition:background .16s ease,opacity .16s ease;}
  .web03-progress-button[aria-current="step"] > span {background:linear-gradient(90deg,#6F937D,#2F5C47);opacity:1;}

  /* A single cue on first screen establishes direction without extra controls. */
  .web03-explore {position:absolute;right:var(--m-pad);bottom:max(22px,calc(env(safe-area-inset-bottom) + 18px)); min-height:44px;padding:8px 0 8px 12px;border:0;background:transparent;color:var(--m-green);font-family:inherit;font-weight:400;font-style:italic;font-size:clamp(.91rem,3.8vw,1.04rem);cursor:pointer;letter-spacing:-.01em;}
  .web03-explore span {display:inline-block;margin-left:5px;font-style:normal;font-size:1.07em;}

  /* Regain reading width; upright title case, quiet rule, more space between practices. */
  .web03-orientation {padding-inline:clamp(32px,8.3vw,41px);}
  .web03-practices {gap:clamp(42px,7vh,64px);padding-top:18px;}
  .web03-practice {padding-left:clamp(21px,5vw,26px);}
  .web03-practice h2 {font-size:clamp(1.55rem,6.4vw,1.9rem);line-height:1.08;letter-spacing:-.015em;text-transform:none;margin-bottom:10px;}
  .web03-practice p {max-width:320px;font-size:clamp(1.1rem,4.65vw,1.3rem);line-height:1.32;}

  /* Journal remains image-led; a small verbal affordance, not a new motif. */
  .web03-invitation-content {grid-template-rows:71% 29%;}
  .web03-journal-action {display:block;position:relative;z-index:1;width:max-content;font-size:.93rem;line-height:1.25;margin-top:19px; color:var(--m-green);border-bottom:1px solid rgba(47,92,71,.45);padding-bottom:2px;}
  .web03-enquiries {padding-top:clamp(30px,5vh,43px);gap:10px;}
  .web03-legal-link {font-size:.84rem!important;line-height:1.25!important;min-height:32px!important;margin-top:4px;color:var(--m-green)!important;text-decoration:underline;text-decoration-color:rgba(47,92,71,.45)!important;text-underline-offset:4px!important;}
}
@media (max-width:720px) and (max-height:660px) {
  .web03-recognition-content {padding-top:30px;}
  .web03-intro {margin-top:36px;font-size:clamp(1.12rem,5vw,1.38rem);}
  .web03-practices {gap:clamp(20px,4.2vh,31px);padding-top:6px;}
  .web03-practice h2 {font-size:clamp(1.35rem,5.7vw,1.6rem);margin-bottom:8px;}
  .web03-practice p {font-size:clamp(1.03rem,4.5vw,1.2rem);}
  .web03-invitation-content {grid-template-rows:67% 33%;}
  .web03-journal-action {font-size:.84rem;margin-top:12px;}
  .web03-enquiries {padding-top:17px;gap:6px;}
  .web03-legal-link {min-height:26px!important;margin-top:0;}
}
@media (prefers-reduced-motion:reduce) {
  .web03-progress-button > span {transition:none;}
}


/* WEB-03 v04 — controlled mobile-only corrections; desktop and About untouched.
   Screen 01 stacked Signifier; header line precisely terminated; no numbers.
   Screen 02 layout preserved; Screen 03 Journal raised within its existing grid.
*/
@media (max-width:720px) {
  /* Full-span rule matches the nav's exact right edge, without an end fade. */
  .web03-header-row::after {
    left:0; right:0; bottom:0;
    height:1px;
    background:linear-gradient(90deg,
      rgba(47,92,71,.29) 0%,
      rgba(47,92,71,.38) 30%,
      rgba(47,92,71,.51) 54%,
      rgba(47,92,71,.69) 73%,
      rgba(47,92,71,.82) 100%);
  }

  /* Larger than an icon, smaller than v02; lower, more business-card-like. */
  .web03-recognition-content {
    padding-top:0;
    padding-bottom:0;
    transform:translateY(clamp(17px,3.1vh,33px));
  }
  .home .web03-mobile-home .web03-display {
    font-size:clamp(4.85rem,22.3vw,6.65rem);
    line-height:.895;
    letter-spacing:-.067em;
    font-weight:400;
    font-style:normal;
    max-width:100%;
  }
  .web03-intro {
    margin-top:clamp(33px,5.5vh,49px);
    font-size:clamp(1.26rem,5.2vw,1.46rem);
    line-height:1.32;
    max-width:305px;
    letter-spacing:-.014em;
  }

  /* Fine horizontal green segments: one visual system with Explore/Continue. */
  .web03-progress-button > span {
    width:34px;height:1.5px;
    background:linear-gradient(90deg,rgba(218,223,203,.95),rgba(47,92,71,.37));
  }
  .web03-progress-button[aria-current="step"] > span {
    background:linear-gradient(90deg,rgba(47,92,71,.60),#2F5C47);
  }
  .web03-explore,
  .web03-continue {
    position:absolute;
    right:var(--m-pad);
    bottom:max(22px,calc(env(safe-area-inset-bottom) + 18px));
    display:inline-flex;align-items:center;justify-content:flex-end;
    min-height:44px;
    padding:8px 0 8px 10px;
    border:0;background:transparent;
    color:var(--m-green);
    font-family:inherit;font-weight:400;font-style:italic;
    font-size:clamp(.91rem,3.8vw,1.04rem);
    cursor:pointer;
    white-space:nowrap;
  }
  .web03-continue span,.web03-explore span {
    display:inline-block;margin-left:6px;font-size:1.07em;font-style:normal;
  }

  /* Keep Screen 02 approved exactly as implemented in v03. */

  /* Keep enquiry separator and footer at v03 height, lift Journal alone. */
  .web03-invitation-content {grid-template-rows:71% 29%;}
  .web03-journal {
    transform:translateY(clamp(-49px,-4.9vh,-28px));
  }
  .web03-enquiries { padding-top:clamp(30px,5vh,43px); gap:10px; }
  .web03-legal-link {margin-top:clamp(4px,1.1vh,12px)!important;}
}
@media (max-width:720px) and (max-height:660px) {
  .web03-recognition-content {transform:translateY(10px);padding-top:0;}
  .home .web03-mobile-home .web03-display {font-size:clamp(4.4rem,21.9vw,5.5rem);}
  .web03-intro {margin-top:25px;font-size:clamp(1.1rem,4.9vw,1.32rem);}
  .web03-invitation-content {grid-template-rows:67% 33%;}
  .web03-journal {transform:translateY(-10px);}
  .web03-enquiries {padding-top:17px;gap:6px;}
  .web03-legal-link {margin-top:2px!important;}
}
@media (prefers-reduced-motion:reduce) {
  .web03-explore,.web03-continue {transition:none;}
}

/* WEB-03 v05 — link integration; green-a test removed in v06. */
@media (min-width:721px) {
  .home .desktop-home .web03-desktop-legal {
    display:inline-block;
    margin-top:0;
    font-size:.76rem;
    line-height:1.3;
    font-weight:400;
    color:#716F68;
    text-decoration:underline;
    text-decoration-color:rgba(113,111,104,.55);
    text-underline-offset:3px;
  }
}
/* Avoid tap-triggered sticky hover underline on touch-only smartphones. */
@media (max-width:720px) and (hover:none) {
  .web03-top-nav a:hover,
  .web03-header-brand:hover { text-decoration:none; }
}


/* WEB-03 v06 | 2 November 2026 | MOBILE ONLY
   The entire first-screen title is black upright Signifier. It is a further 5% smaller
   than the already approved black / 10%-smaller trial. No unofficial logo markup.
   Header line, practice distribution and legal link placement are the only other changes.
*/
@media (max-width:720px) {
  /* Quiet architectural header: present at the left, darkening only beneath the links.
     The right edge remains flush with the word About. */
  .web03-header-row::after {
    background:linear-gradient(90deg,
      rgba(47,92,71,.045) 0%,
      rgba(47,92,71,.085) 35%,
      rgba(47,92,71,.27) 55%,
      rgba(47,92,71,.48) 70%,
      rgba(47,92,71,.73) 100%);
  }

  /* 5% smaller than 20vw black title trial; preserve its position and typography. */
  .home .web03-mobile-home .web03-display {
    color:#1C1B1A;
    font-size:clamp(4.08rem,19vw,5.7rem);
  }

  /* Use available screen height instead of concentrating all three practices at centre.
     The fixed maximum and compact-screen override prevent excessive spread/overflow. */
  .web03-practices {
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    gap:0;
    padding-top:0;
    width:100%;
    height:min(100%, clamp(430px,56dvh,515px));
  }

  /* Legal information leaves the enquiries flow; bottom right, clear of page controls. */
  .web03-invitation .web03-legal-link {
    position:absolute;
    right:var(--m-pad);
    bottom:max(68px,calc(env(safe-area-inset-bottom) + 65px));
    display:inline-flex;
    align-items:center;
    justify-content:flex-end;
    min-height:36px!important;
    font-family:inherit;
    font-size:.81rem!important;
    font-weight:400;
    line-height:1.25!important;
    margin:0!important;
    padding:4px 0 4px 12px;
    color:var(--m-green)!important;
    text-decoration:underline;
    text-decoration-color:rgba(47,92,71,.45)!important;
    text-underline-offset:4px!important;
    white-space:nowrap;
  }
}
@media (max-width:720px) and (max-height:700px) {
  .home .web03-mobile-home .web03-display {
    font-size:clamp(3.8rem,18.8vw,4.7rem);
  }
  /* Compact phones require content-led spacing rather than the tall-screen arrangement. */
  .web03-practices {
    display:grid;
    align-content:center;
    height:auto;
    gap:clamp(22px,5.8vh,39px);
  }
  .web03-invitation .web03-legal-link {
    bottom:max(62px,calc(env(safe-area-inset-bottom) + 59px));
    font-size:.76rem!important;
    min-height:32px!important;
  }
}
@media (prefers-reduced-motion:reduce) {
  .web03-progress-button > span {transition:none;}
}