/* ==========================================================================
   ADAM SMART - PORTFOLIO
   Shared stylesheet for index.html, work.html, project.html and about.html

   Contents
   1.  Global scale
   2.  Themes
   3.  Base
   4.  Header and navigation
   5.  Mobile menu
   6.  Hero
   7.  Stats
   8.  Sections
   9.  Work grid
   10. Filter bar
   11. Buttons
   12. Marquee
   13. Project page
   14. Footer
   15. Index and grid layouts
   16. Responsive
   ========================================================================== */

/* ==========================================================================
   1. GLOBAL SCALE
   Type sizes are rem based so they respond to the browser font setting.
   Spacing is named for the pixel value it produces.
   ========================================================================== */
html{
  --12px:0.75rem;
  --13px:0.8125rem;
  --14px:0.875rem;
  --15px:0.9375rem;
  --16px:1rem;
  --17px:1.0625rem;
  --18px:1.125rem;
  --19px:1.1875rem;
  --20px:1.25rem;
  --21px:1.3125rem;
  --22px:1.375rem;
  --24px:1.5rem;
  --26px:1.625rem;
  --28px:1.75rem;
  --32px:2rem;
  --36px:2.25rem;
  --40px:2.5rem;
  --44px:2.75rem;
  --48px:3rem;
  --56px:3.5rem;
  --64px:4rem;
  --72px:4.5rem;
  --88px:5.5rem;

  --space_4:4px;
  --space_8:8px;
  --space_12:12px;
  --space_16:16px;
  --space_20:20px;
  --space_24:24px;
  --space_28:28px;
  --space_32:32px;
  --space_40:40px;
  --space_48:48px;
  --space_52:52px;
  --space_56:56px;
  --space_64:64px;
  --space_80:80px;

  --radius:20px;
  --radius_sm:8px;
  --radius_xs:4px;

  --content_width:1440px;
  --header_height:72px;
  /* Shared measure for centred blocks. Everything in a centred stack uses
     this so their left edges line up once the text is left aligned. */
  --measure:760px;
  --transition:0.2s ease;
}

/* ==========================================================================
   2. THEMES
   One design, two modes. The toggle in the header swaps between them and the
   choice is remembered. The header always uses the page background at reduced
   alpha so it blends into the page while keeping the blur.
   ========================================================================== */

/* --- Light --------------------------------------------------------------- */
:root[data-theme="light"]{
  --color_bg:rgb(243 239 230);
  --color_surface:rgb(255 253 248);
  --color_surface_alt:rgb(255 253 248);
  --color_nav_bg:rgb(243 239 230 / 0.72);
  --color_ink:#171310;
  --color_ink_muted:#5F564C;
  --color_ink_soft:#8A8074;
  --color_accent:#de633a;
  --color_accent_deep:#ba451d;
  --color_accent_tint:#efd7cc;
  --color_on_accent:#2A1208;
  --color_line:rgba(23,19,16,0.18);
  --color_footer_bg:#171310;
  --color_footer_ink:rgb(243 239 230);
  --color_menu_bg:rgb(243 239 230);

  --font_head:'Space Grotesk',system-ui,sans-serif;
  --font_body:'Mona Sans','Helvetica Neue',Arial,sans-serif;
  --font_mono:'IBM Plex Mono',ui-monospace,monospace;
  --weight_head:700;
  --tracking_head:-0.04em;

  --shadow_card:none;
  --shadow_card_hover:none;
  --border_width:1px;
}

/* --- Dark -----------------------------------------------------------------
   Also the bare :root fallback, so an unknown or missing data-theme still
   renders a complete page rather than dropping every token. */
:root,
:root[data-theme="dark"]{
  --color_bg:#0A0A0A;
  --color_surface:#161616;
  --color_surface_alt:#151515;
  --color_nav_bg:rgba(10,10,10,0.66);
  --color_ink:#F4F2ED;
  --color_ink_muted:#A6A29A;
  --color_ink_soft:#726E67;
  --color_accent:#de633a;
  --color_accent_deep:#e68463;
  --color_accent_tint:#3A2016;
  --color_on_accent:#160A05;
  --color_line:rgba(244,242,237,0.16);
  --color_footer_bg:#000000;
  --color_footer_ink:#F4F2ED;
  --color_menu_bg:#0A0A0A;

  --font_head:'Space Grotesk',system-ui,sans-serif;
  --font_body:'Mona Sans','Helvetica Neue',Arial,sans-serif;
  --font_mono:'IBM Plex Mono',ui-monospace,monospace;
  --weight_head:700;
  --tracking_head:-0.04em;

  --shadow_card:none;
  --shadow_card_hover:none;
  --border_width:1px;
}

/* Signal, Midnight, Linen and Ember are parked. Their token blocks were removed
   to keep this file lean, the structure is identical so they can return. */

/* ==========================================================================
   3. BASE
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box;}

/* Themes raise the specificity of layout rules, so [hidden] needs to outrank
   them or filtered tiles stay on screen. */
[hidden]{display:none !important;}

html{scroll-behavior:smooth;}

/* Anchor targets stop clear of the sticky header rather than under it */
[id]{scroll-margin-top:calc(var(--theme_bar_height,0px) + var(--header_height) + var(--space_24));}

body{
  margin:0;
  background:var(--color_bg);
  color:var(--color_ink);
  font-family:var(--font_body);
  font-size:var(--16px);
  font-weight:500;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  transition:background var(--transition), color var(--transition);
}
body.menu_open{overflow:hidden;}

h1,h2,h3,h4{
  font-family:var(--font_head);
  font-weight:var(--weight_head);
  letter-spacing:var(--tracking_head);
  line-height:1.15;
  margin:0;
  color:var(--color_ink);
  text-wrap:balance;
}
p{margin:0;text-wrap:pretty;}
.tile_desc,.hero_lede,.section_sub,.stat_caption,.menu_footer p,
.summary_item p,.case_text p,.project_lede{text-wrap:pretty;}

a{color:inherit;text-decoration:none;}
img{display:block;max-width:100%;}
button{font-family:inherit;}

:focus-visible{
  outline:3px solid var(--color_accent);
  outline-offset:3px;
  border-radius:var(--radius_sm);
}

.skip_link{
  position:absolute;left:var(--space_16);top:-64px;z-index:500;
  background:var(--color_accent);color:var(--color_on_accent);
  padding:var(--space_12) var(--space_16);border-radius:var(--radius_sm);
  font-size:var(--16px);transition:top var(--transition);
}
.skip_link:focus{top:var(--space_16);}

.visually_hidden{
  position:absolute;width:1px;height:1px;
  padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

.flex_container{
  width:100%;
  max-width:var(--content_width);
  margin:0 auto;
  padding-inline:clamp(20px,5vw,80px);
}
.flex_row{display:flex;flex-direction:row;align-items:center;}
.flex_col{display:flex;flex-direction:column;}

/* ==========================================================================
   4. HEADER AND NAVIGATION
   ========================================================================== */
.site_header{
  position:sticky;
  top:var(--theme_bar_height,0px);
  z-index:300;
  background:var(--color_nav_bg);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  backdrop-filter:saturate(180%) blur(20px);
  transition:background var(--transition);
}
body.menu_open .site_header{
  background:transparent;
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
}

.header_inner{
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--space_24);
  min-height:72px;
}

.brand_name{
  font-family:var(--font_head);
  font-weight:500;
  font-size:var(--16px);
  letter-spacing:var(--tracking_head);
  color:var(--color_ink);
}
.brand_divider{color:var(--color_accent);padding-inline:var(--space_4);}

.nav_links{display:flex;gap:48px;}
.nav_links a{
  position:relative;
  display:inline-block;
  padding:var(--space_8) 0;
  font-family:var(--font_head);
  font-weight:500;
  font-size:var(--16px);
  color:var(--color_ink_muted);
  transition:color var(--transition);
}
.nav_links a::after{
  content:"";
  position:absolute;left:0;bottom:0;
  width:100%;height:3px;border-radius:0;
  background:var(--color_accent);
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform var(--transition);
}
.nav_links a:hover{color:var(--color_accent);}
.nav_links a:hover::after{transform:scaleX(1);}
.nav_links a[aria-current="page"]{color:var(--color_ink);}
.nav_links a[aria-current="page"]::after{transform:scaleX(1);}

.header_actions{display:flex;align-items:center;gap:var(--space_20);}
.social_link{
  display:inline-flex;align-items:center;justify-content:center;
  font-size:var(--24px);color:var(--color_ink_muted);
  transition:color var(--transition);
}
.social_link:hover{color:var(--color_accent);}

/* Light and dark switch */
.theme_toggle{
  display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:36px;
  padding:0;
  background:transparent;
  border:var(--border_width) solid var(--color_line);
  border-radius:var(--radius_sm);
  color:var(--color_ink_muted);
  font-size:var(--20px);
  cursor:pointer;
  transition:color var(--transition), border-color var(--transition);
}
.theme_toggle:hover{color:var(--color_accent);border-color:var(--color_accent);}

.menu_toggle{
  display:none;
  flex-direction:column;align-items:center;gap:var(--space_4);
  background:transparent;border:0;cursor:pointer;
  padding:var(--space_4);
  color:var(--color_ink);
}
.menu_bars{position:relative;width:24px;height:12px;}
.menu_bars span{
  position:absolute;left:0;width:24px;height:2px;border-radius:2px;
  background:currentColor;
  transition:transform 0.3s cubic-bezier(0.4,0,0.2,1), top 0.25s ease;
}
.menu_bars span:nth-child(1){top:0;}
.menu_bars span:nth-child(2){top:8px;}
.menu_label{
  font-family:var(--font_head);
  font-size:var(--12px);font-weight:500;
  letter-spacing:0.08em;text-transform:uppercase;line-height:1;
}
.menu_toggle[aria-expanded="true"] .menu_bars span:nth-child(1){top:4px;transform:rotate(45deg);}
.menu_toggle[aria-expanded="true"] .menu_bars span:nth-child(2){top:4px;transform:rotate(-45deg);}

/* ==========================================================================
   5. MOBILE MENU
   ========================================================================== */
.mobile_menu{
  position:fixed;inset:0;z-index:200;
  background:var(--color_menu_bg);
  display:flex;flex-direction:column;
  padding:104px clamp(20px,7vw,64px) var(--space_48);
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity 0.28s ease, transform 0.28s ease, visibility 0.28s;
}
.mobile_menu[data-open="true"]{opacity:1;visibility:visible;transform:translateY(0);}
.mobile_menu nav{display:flex;flex-direction:column;}
.mobile_menu nav a{
  display:flex;align-items:center;justify-content:space-between;
  font-family:var(--font_head);font-weight:var(--weight_head);
  font-size:clamp(var(--28px),9vw,var(--44px));
  letter-spacing:var(--tracking_head);
  padding:var(--space_16) 0;
  border-bottom:var(--border_width) solid var(--color_line);
}
.mobile_menu nav a i{font-size:var(--24px);color:var(--color_accent);}
.menu_footer{margin-top:auto;padding-top:var(--space_32);}
.menu_footer p{font-size:var(--16px);color:var(--color_ink_muted);margin-bottom:var(--space_16);}
.menu_footer .flex_row{gap:var(--space_12);flex-wrap:wrap;}

/* ==========================================================================
   6. HERO
   ========================================================================== */
/* Text is left aligned everywhere. Blocks that were centred stay centred as
   blocks, they just no longer centre their own lines. */
.hero_section{
  padding-block:clamp(32px,5vw,52px);
  text-align:left;
}

/* Homepage hero: copy on the left, the numbers panel on the right, so the
   band fills the same width as every other container on the page. */
.hero_layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(32px,4vw,56px);
  align-items:center;
}
.hero_copy{display:flex;flex-direction:column;}
.hero_copy .hero_title,
.hero_copy .hero_lede,
.hero_copy .hero_actions,
.hero_copy .eyebrow{margin-inline:0;max-width:none;}
.hero_copy .hero_lede{max-width:52ch;}
.eyebrow{
  display:none; /* switch to flex when open to new work */
  align-items:center;justify-content:flex-start;gap:var(--space_8);
  max-width:var(--measure);margin-inline:auto;
  font-size:var(--13px);font-weight:600;
  letter-spacing:0.14em;text-transform:uppercase;
  color:var(--color_accent);
  margin-bottom:var(--space_16);
}
.eyebrow i{font-size:var(--16px);}

.hero_title{
  font-size:clamp(var(--28px),5vw,var(--48px));
  max-width:20ch;
  margin:0 auto var(--space_20);
}
.hero_lede{
  font-size:clamp(var(--16px),1.5vw,var(--18px));
  font-weight:500;
  color:var(--color_ink_muted);
  max-width:var(--measure);
  margin:0 auto;
}
.hero_actions{
  display:flex;gap:var(--space_12);justify-content:flex-start;
  max-width:var(--measure);margin-inline:auto;
  margin-top:var(--space_24);
}


/* Interior page hero, used by work.html, project.html and about.html */
.page_hero{padding-block:clamp(32px,5vw,52px);}
.page_hero .hero_title{margin-inline:0;max-width:20ch;}
.page_hero .hero_lede{margin-inline:0;}

/* ==========================================================================
   7. STATS
   ========================================================================== */
.stats_band{
  display:flex;
  justify-content:center;
  padding-bottom:clamp(32px,5vw,52px);
}
/* Inside the hero the panel fills its column and drops to two across, since
   three would be cramped at half width. */
.hero_stats .stats_grid{
  width:100%;
  grid-template-columns:repeat(2,minmax(0,1fr));
}
.stats_grid{
  width:fit-content;
  background:var(--color_surface);
  border:var(--border_width) solid var(--color_line);
  border-radius:var(--radius);
  box-shadow:var(--shadow_card);
  padding:clamp(20px,3vw,32px);
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--space_24) var(--space_28);
}
.stat_item{display:flex;gap:var(--space_12);align-items:flex-start;}
.stat_item i{
  font-size:var(--20px);color:var(--color_accent);
  background:var(--color_accent_tint);
  width:36px;height:36px;border-radius:var(--radius_sm);
  display:grid;place-items:center;flex-shrink:0;
}
.stat_value{
  font-family:var(--font_head);font-weight:var(--weight_head);
  font-size:clamp(var(--16px),1.6vw,var(--18px));
  letter-spacing:var(--tracking_head);line-height:1.3;
}
.stat_caption{font-size:var(--14px);color:var(--color_ink_muted);line-height:1.45;}

/* ==========================================================================
   8. SECTIONS
   ========================================================================== */
.page_section{padding-block:clamp(48px,7vw,80px);}
.page_section.tinted{
  background:var(--color_surface_alt);
  padding-block:clamp(48px,6vw,56px);
}
/* Consecutive tinted sections read as one surface, so the seam between them
   should not carry two lots of padding. */
.page_section.tinted + .page_section.tinted{padding-top:0;}
.section_head{
  display:flex;
  flex-direction:row;
  align-items:flex-end;
  justify-content:space-between;
  gap:var(--space_24);
  margin-bottom:var(--space_32);
}
.section_head h2{font-size:clamp(var(--24px),3.4vw,var(--36px));max-width:38ch;}
.section_head_left{display:flex;align-items:center;gap:var(--space_16);flex-wrap:wrap;}

/* Layout toggle: card grid or index list */
.view_toggle{
  display:flex;
  border:var(--border_width) solid var(--color_line);
  border-radius:var(--radius_sm);
  overflow:hidden;
}
.view_btn{
  display:grid;place-items:center;
  width:36px;height:32px;
  background:transparent;border:0;cursor:pointer;
  color:var(--color_ink_muted);
  font-size:var(--18px);
  transition:background var(--transition), color var(--transition);
}
.view_btn + .view_btn{border-left:var(--border_width) solid var(--color_line);}
.view_btn:hover{color:var(--color_accent);}
.view_btn[aria-pressed="true"]{
  background:var(--color_accent);
  color:var(--color_on_accent);
}
/* Standalone so it can be used anywhere, not only in a section heading */
.text_link{
  display:inline-flex;align-items:center;gap:var(--space_4);
  font-size:var(--16px);font-weight:500;
  color:var(--color_accent);white-space:nowrap;
}
.text_link i{transition:transform var(--transition);}
.text_link:hover{color:var(--color_accent_deep);}
.text_link:hover i{transform:translateX(4px);}
.section_sub{
  font-size:var(--16px);color:var(--color_ink_muted);
  max-width:60ch;margin-top:var(--space_12);
}

/* ==========================================================================
   9. WORK GRID
   ========================================================================== */
.work_grid{
  display:grid;
  grid-template-columns:1.39fr 1fr;
  gap:var(--space_32);
  /* Tiles size to their own content, so the narrow one does not stretch to
     match the tall one and leave dead space under its text. */
  align-items:start;
}
.work_grid + .work_grid{margin-top:var(--space_32);}

/* Mirrored row so the wide tile alternates sides down the page */
.work_grid_reverse{grid-template-columns:1fr 1.39fr;}

/* Even three column grid, used on the all work page */
.work_grid_three{grid-template-columns:repeat(3,minmax(0,1fr));}

.work_tile{
  background:var(--color_surface);
  border:var(--border_width) solid var(--color_line);
  border-radius:var(--radius);
  box-shadow:var(--shadow_card);
  overflow:hidden;
  display:flex;flex-direction:column;
  color:inherit;
  transition:transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.work_tile:hover{
  transform:translateY(-4px);
  box-shadow:var(--shadow_card_hover);
  border-color:var(--color_accent);
}
.work_tile[hidden]{display:none;}

/* One image per tile. Swap the src, nothing else needs touching. */
.tile_media{
  position:relative;
  aspect-ratio:16/10;
  background:var(--color_surface_alt);
  box-shadow:inset 0 0 0 1px var(--color_line);
  overflow:hidden;
}
.tile_media img{
  width:100%;height:100%;
  object-fit:cover;
  transition:transform 0.5s cubic-bezier(0.2,0.6,0.2,1);
}
.work_tile:hover .tile_media img{transform:scale(1.03);}

.tile_body{
  padding:var(--space_24);
  display:flex;flex-direction:column;gap:var(--space_12);
  flex:1;
}
.tile_title{display:flex;align-items:center;justify-content:space-between;gap:var(--space_12);}
.tile_title h3{font-size:clamp(var(--18px),1.8vw,var(--24px));}
.tile_title i{
  font-size:var(--20px);color:var(--color_ink_soft);
  transition:color var(--transition), transform var(--transition);
}
.work_tile:hover .tile_title i{color:var(--color_accent);transform:translate(3px,-3px);}

.tag_list{display:flex;gap:var(--space_8);flex-wrap:wrap;}
.tag_item{
  display:inline-flex;align-items:center;gap:var(--space_4);
  font-size:var(--13px);font-weight:600;
  padding:var(--space_4) var(--space_12);
  border-radius:var(--radius_xs);
  background:var(--color_accent_tint);
  color:var(--color_accent_deep);
}
:root[data-theme="dark"] .tag_item{color:var(--color_ink);}
.tag_item i{font-size:var(--14px);}
.tile_desc{
  font-size:var(--16px);
  font-weight:500;
  color:var(--color_ink_muted);
  line-height:1.6;
}

.empty_state{
  padding:var(--space_48) 0;
  text-align:center;
  color:var(--color_ink_muted);
  font-size:var(--16px);
}

/* ==========================================================================
   10. FILTER BAR
   ========================================================================== */
/* The bar lives at the top of the work section and sticks for the length of
   it, which is as far as it is useful anyway. Solid section colour, no blur:
   a second blurred layer under the header muddied both. */
.filter_sticky{
  position:sticky;
  top:calc(var(--theme_bar_height,0px) + var(--header_height));
  z-index:100;
  background:var(--color_surface_alt);
  border-bottom:var(--border_width) solid transparent;
  transition:border-color var(--transition);
  margin-bottom:var(--space_16);
}
.filter_sticky.is_stuck{border-bottom-color:var(--color_line);}

.filter_row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--space_16);
  flex-wrap:wrap;
  padding-block:var(--space_16);
}

.filter_bar{
  display:flex;gap:var(--space_8);flex-wrap:wrap;
  min-width:0;
}
.filter_item{
  font-family:var(--font_body);
  font-size:var(--16px);font-weight:500;
  padding:var(--space_8) var(--space_16);
  border-radius:var(--radius_sm);
  border:var(--border_width) solid var(--color_line);
  background:transparent;
  color:var(--color_ink_muted);
  cursor:pointer;
  transition:color var(--transition), border-color var(--transition), background var(--transition);
}
.filter_item:hover{color:var(--color_accent);border-color:var(--color_accent);}
.filter_item[aria-pressed="true"]{
  background:var(--color_accent);
  border-color:var(--color_accent);
  color:var(--color_on_accent);
}

/* ==========================================================================
   11. BUTTONS
   ========================================================================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  gap:var(--space_4);
  font-family:var(--font_body);
  font-size:var(--16px);font-weight:600;white-space:nowrap;
  padding:var(--space_8) var(--space_12);
  border-radius:var(--radius_sm);
  background:var(--color_accent);color:var(--color_on_accent);
  border:var(--border_width) solid var(--color_accent);
  cursor:pointer;
  transition:background var(--transition), border-color var(--transition), color var(--transition);
}
.btn i{font-size:var(--20px);flex-shrink:0;transition:transform var(--transition);}
.btn:hover{background:var(--color_accent_deep);border-color:var(--color_accent_deep);}
.btn:hover .icon_arrow{transform:translateX(4px);}
.btn:hover .icon_arrow_back{transform:translateX(-4px);}

.btn_ghost{
  background:transparent;
  color:var(--color_ink);
  border-color:var(--color_line);
}
.btn_ghost:hover{
  background:transparent;
  border-color:var(--color_accent);
  color:var(--color_accent);
}
.actions_center{display:flex;justify-content:center;margin-top:var(--space_40);}

/* Closing action. Mirrors the link in the section heading, right aligned so
   the two bookend the list. */
.actions_row{
  display:flex;
  justify-content:flex-end;
  margin-top:var(--space_24);
}

/* ==========================================================================
   12. MARQUEE
   ========================================================================== */
.marquee_wrap{
  position:relative;
  overflow:hidden;
  padding-block:var(--space_4);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
}
.marquee_wrap + .marquee_wrap{margin-top:var(--space_12);}
.marquee_track{
  display:flex;
  width:max-content;
  will-change:transform;
  backface-visibility:hidden;
}
.chip_item{
  display:flex;align-items:center;gap:var(--space_12);
  padding:var(--space_12) var(--space_20);
  margin-right:var(--space_12);
  background:var(--color_surface);
  border:var(--border_width) solid var(--color_line);
  border-radius:var(--radius_sm);
  font-size:var(--16px);font-weight:500;white-space:nowrap;
  color:var(--color_ink_muted);
  user-select:none;
}
.chip_item img{width:20px;height:20px;flex-shrink:0;}
.chip_item > i{font-size:var(--20px);color:var(--color_accent);}
:root[data-theme="dark"] .chip_item img{filter:brightness(0) invert(1) opacity(0.88);}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .marquee_track{animation:none !important;transform:none !important;}
}

/* ==========================================================================
   13. PROJECT PAGE
   ========================================================================== */
.project_hero{
  padding-block:clamp(32px,5vw,52px);
  text-align:left;
}
.project_hero .tag_list{
  justify-content:flex-start;
  max-width:var(--measure);margin:0 0 var(--space_20);
}
.project_title{
  font-size:clamp(var(--32px),5.4vw,var(--56px));
  max-width:30ch;margin:0 0 var(--space_20);
}
.project_lede{
  font-size:clamp(var(--16px),1.5vw,var(--18px));
  color:var(--color_ink_muted);
  max-width:75ch;margin:0;
}

.summary_grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--space_24);
  padding-bottom:clamp(32px,5vw,52px);
}
.summary_item{
  background:var(--color_surface);
  border:var(--border_width) solid var(--color_line);
  border-radius:var(--radius);
  box-shadow:var(--shadow_card);
  padding:var(--space_24);
}
.summary_item h2{
  display:flex;align-items:center;gap:var(--space_8);
  font-size:var(--18px);margin-bottom:var(--space_12);
}
.summary_item h2 i{font-size:var(--20px);color:var(--color_accent);}
.summary_item p{font-size:var(--16px);color:var(--color_ink_muted);}
.summary_list{
  list-style:none;margin:0;padding:0;
  display:flex;flex-direction:column;gap:var(--space_8);
}
.summary_list li{
  display:flex;gap:var(--space_8);align-items:flex-start;
  font-size:var(--16px);color:var(--color_ink_muted);
}
.summary_list li i{font-size:var(--20px);color:var(--color_accent);flex-shrink:0;}
.summary_list strong{color:var(--color_ink);font-weight:600;}

.case_row{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--space_40);
  align-items:center;
  padding-block:clamp(32px,4vw,48px);
}
.case_row.reverse .case_media{order:2;}
.case_media{
  border-radius:var(--radius);
  overflow:hidden;
  background:var(--color_surface_alt);
  box-shadow:inset 0 0 0 1px var(--color_line);
  aspect-ratio:16/9;
}
.case_media img{width:100%;height:100%;object-fit:cover;}
.case_media_wide{
  border-radius:var(--radius);
  overflow:hidden;
  background:var(--color_surface_alt);
  box-shadow:inset 0 0 0 1px var(--color_line);
  aspect-ratio:21/9;
  margin-block:clamp(20px,3vw,32px);
}
.case_media_wide img{width:100%;height:100%;object-fit:cover;}

/* Every case section shares one label and heading treatment, whether it sits
   beside an image or in a centred column. */
.case_text h2,
.case_text_center h2{
  font-size:clamp(var(--20px),2.2vw,var(--24px));
  margin-bottom:var(--space_12);
  max-width:52ch;
}
.case_text p,
.case_text_center p{font-size:var(--16px);color:var(--color_ink_muted);max-width:75ch;}
.case_label{
  font-family:var(--font_mono);
  font-size:var(--12px);
  font-weight:500;
  letter-spacing:0.1em;text-transform:uppercase;
  color:var(--color_accent);
  margin-bottom:var(--space_8);
}
.case_text_center{
  max-width:75ch;margin-inline:auto;text-align:left;
  padding-block:clamp(32px,4vw,48px);
}

/* Images sit edge to edge inside their container, so the container's own
   inset shadow ends up behind them and does nothing. This overlay puts a
   hairline back on top, which matters most in light mode where a white
   screenshot otherwise dissolves into the page. */
.tile_media,
.case_media,
.case_media_wide,
.case_video,
.about_media{position:relative;}

.tile_media::after,
.case_media::after,
.case_media_wide::after,
.case_video::after,
.about_media::after{
  content:"";
  position:absolute;inset:0;
  border-radius:inherit;
  box-shadow:inset 0 0 0 1px var(--color_line);
  pointer-events:none;
  z-index:1;
}

/* Video sits at its own aspect ratio rather than being cropped to a slot.
   Nothing downloads until the visitor presses play, hence preload="none"
   and a poster image on the element itself. */
.case_video{
  border-radius:var(--radius);
  overflow:hidden;
  background:var(--color_surface_alt);
  box-shadow:inset 0 0 0 1px var(--color_line);
  margin-block:clamp(20px,3vw,32px);
  line-height:0;
}
.case_video video{width:100%;height:auto;display:block;}
.case_caption{
  font-size:var(--14px);
  color:var(--color_ink_soft);
  margin-top:calc(var(--space_12) * -1);
  max-width:75ch;
}

.project_nav{
  display:flex;justify-content:space-between;gap:var(--space_16);
  flex-wrap:wrap;
  padding-top:var(--space_32);
  border-top:var(--border_width) solid var(--color_line);
}

/* ==========================================================================
   13b. ABOUT PAGE
   ========================================================================== */
.about_layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,0.8fr);
  gap:clamp(32px,5vw,64px);
  align-items:start;
}
.about_media{
  border-radius:var(--radius);
  overflow:hidden;
  background:var(--color_surface_alt);
  box-shadow:inset 0 0 0 1px var(--color_line);
  aspect-ratio:4/5;
  position:sticky;
  top:calc(var(--theme_bar_height,0px) + var(--header_height) + var(--space_32));
}
.about_media img{width:100%;height:100%;object-fit:cover;}

.about_copy{display:flex;flex-direction:column;gap:var(--space_24);}
.about_copy p{font-size:var(--18px);color:var(--color_ink_muted);max-width:60ch;}
.about_copy p.lead{font-size:clamp(var(--20px),2.2vw,var(--24px));color:var(--color_ink);}

.about_list{
  list-style:none;margin:0;padding:0;
  display:flex;flex-direction:column;
}
.about_list li{
  display:grid;
  grid-template-columns:56px minmax(0,1fr);
  gap:var(--space_24);
  padding-block:var(--space_24);
  border-top:var(--border_width) solid var(--color_line);
}
.about_list .list_index{
  font-family:var(--font_mono);
  font-size:var(--13px);
  color:var(--color_ink_soft);
  padding-top:var(--space_4);
}
.about_list h3{font-size:var(--20px);margin-bottom:var(--space_8);}
.about_list p{font-size:var(--16px);color:var(--color_ink_muted);max-width:60ch;}

.about_facts{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:var(--space_12) var(--space_24);
  margin:0;
}
.about_facts dt{
  font-family:var(--font_mono);
  font-size:var(--12px);
  letter-spacing:0.1em;text-transform:uppercase;
  color:var(--color_ink_soft);
  padding-top:2px;
}
.about_facts dd{margin:0;font-size:var(--16px);color:var(--color_ink);}

/* ==========================================================================
   14. FOOTER
   ========================================================================== */
.site_footer{
  background:var(--color_footer_bg);
  color:var(--color_footer_ink);
  padding-block:clamp(48px,6vw,72px);
}
.footer_top{
  display:flex;justify-content:space-between;align-items:flex-start;
  gap:var(--space_32);flex-wrap:wrap;
  padding-bottom:var(--space_32);
  margin-bottom:var(--space_28);
  border-bottom:1px solid rgba(255,255,255,0.14);
}
.footer_top h3{color:var(--color_footer_ink);font-size:clamp(var(--20px),2.6vw,var(--28px));max-width:45ch;}
.footer_links{display:flex;gap:var(--space_12);flex-wrap:wrap;}
.footer_links a{
  display:inline-flex;align-items:center;gap:var(--space_8);
  font-size:var(--16px);
  padding:var(--space_12) var(--space_16);
  border-radius:var(--radius_sm);
  border:1px solid rgba(255,255,255,0.22);
  transition:background var(--transition);
}
.footer_links a:hover{background:rgba(255,255,255,0.10);}
.footer_bottom{
  display:flex;justify-content:space-between;gap:var(--space_16);flex-wrap:wrap;
  font-size:var(--14px);opacity:0.7;
}

/* ==========================================================================
   15. INDEX AND GRID LAYOUTS
   The index is the default. Work becomes a numbered run of full width rows,
   each pairing the project image with its title and summary so the work is
   visible without any interaction. The toggle switches to a card grid.
   ========================================================================== */
/* Ultra runs the headline full width and lets the numbers sit underneath as
   a hairline row. Padding is kept tight so the first project peeks in. */
:root .hero_section{
  text-align:left;
  padding-block:var(--space_40);
}
:root .hero_layout{
  grid-template-columns:minmax(0,1fr);
  gap:var(--space_40);
  align-items:start;
}
:root .hero_title{
  font-size:clamp(var(--32px),6vw,var(--72px));
  max-width:none;line-height:1.03;
}
:root .hero_lede{
  max-width:56ch;
  font-size:clamp(var(--16px),1.6vw,var(--18px));
}

/* Left align the project hero. The measures themselves are set once in
   section 13 and must not be overridden here, an earlier version set 18ch
   and 56ch at this higher specificity and silently won. */
:root .project_hero .tag_list,
:root .project_title,
:root .project_lede{margin-inline:0;}

:root .stats_grid,
:root .hero_stats .stats_grid{
  width:100%;
  grid-template-columns:repeat(3,minmax(0,1fr));
  background:transparent;border:0;border-radius:0;box-shadow:none;
  border-top:1px solid var(--color_line);
  padding:var(--space_28) 0 0;
  gap:var(--space_28) var(--space_40);
}
:root .stat_value{
  font-size:clamp(var(--20px),2.4vw,var(--28px));font-weight:500;
}
:root .stat_caption{
  font-family:var(--font_mono);
  font-size:var(--12px);
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--color_ink_soft);
}

:root .chip_item{background:transparent;}

/* --- Index view -----------------------------------------------------------
   Driven by data-view on the work section rather than by theme, so the
   toggle beside the section heading can switch any theme into it. Ultra
   simply defaults to it. */
[data-view="index"]{counter-reset:work_counter;}
[data-view="index"] .work_grid{display:block;}
[data-view="index"] .work_grid + .work_grid{margin-top:0;}

[data-view="index"] .work_tile{
  counter-increment:work_counter;
  display:grid;
  grid-template-columns:56px minmax(0,360px) minmax(0,1fr);
  align-items:center;
  gap:var(--space_32);
  background:transparent;
  border:0;border-top:1px solid var(--color_line);
  border-radius:0;box-shadow:none;overflow:visible;
  padding-block:var(--space_28);
  transition:padding-left var(--transition), border-color var(--transition);
}
[data-view="index"] .work_tile:hover{
  transform:none;box-shadow:none;
  border-color:var(--color_accent);
  padding-left:var(--space_12);
}
[data-view="index"] .work_tile::before{
  content:counter(work_counter,decimal-leading-zero);
  font-family:var(--font_mono);
  font-size:var(--13px);
  color:var(--color_ink_soft);
  align-self:start;
  padding-top:var(--space_4);
}
[data-view="index"] .tile_media{
  display:block;
  aspect-ratio:16/10;
  border-radius:var(--radius_sm);
}
[data-view="index"] .tile_body{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:var(--space_12);
  padding:0;
}
[data-view="index"] .tile_title{justify-content:flex-start;}
[data-view="index"] .tile_title h3{
  font-size:clamp(var(--24px),3vw,var(--40px));
  font-weight:500;line-height:1.06;
  transition:color var(--transition);
}
[data-view="index"] .work_tile:hover .tile_title h3{color:var(--color_accent);}
[data-view="index"] .tile_title i{display:none;}
[data-view="index"] .tile_desc{
  max-width:56ch;font-size:var(--16px);
}

/* Project page in index mode: rules rather than cards. Tags, headings and
   icons stay exactly as they are in Linen and Ember. */
:root .summary_item{
  background:transparent;
  border:0;border-top:1px solid var(--color_line);
  border-radius:0;box-shadow:none;
  padding:var(--space_24) 0 0;
}

/* Ultra below 900px. Rows unstack into a single column with the image on top. */
@media (max-width:900px){

  [data-view="index"] .work_tile{
    display:flex;
    flex-direction:column;
    gap:var(--space_12);
    padding-block:var(--space_24);
  }
  [data-view="index"] .work_tile:hover{padding-left:0;}
  [data-view="index"] .work_tile::before{padding-top:0;}
  [data-view="index"] .tile_media{order:-1;}
  [data-view="index"] .tile_title h3{font-size:var(--28px);}
  [data-view="index"] .tile_desc{max-width:none;}
  :root .hero_title{font-size:clamp(var(--32px),7vw,var(--56px));max-width:none;}
  :root .stats_grid{gap:var(--space_20) var(--space_16);}
  :root .stat_value{font-size:var(--20px);}
}

@media (max-width:520px){
  [data-view="index"] .tile_title h3{font-size:var(--24px);}
  :root .hero_title{font-size:var(--32px);}
  :root .stat_value{font-size:var(--18px);}
}


/* ==========================================================================
   17. ACCESSIBILITY PANEL
   A small button that expands into a settings panel. Options are written to
   data attributes on the html element and remembered in localStorage.
   ========================================================================== */
.a11y_launcher{
  position:fixed;
  right:clamp(16px,3vw,28px);
  bottom:clamp(16px,3vw,28px);
  z-index:350;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
}

.a11y_toggle{
  display:grid;place-items:center;
  width:52px;height:52px;
  border-radius:100px;
  border:var(--border_width) solid var(--color_line);
  background:var(--color_surface);
  color:var(--color_ink);
  font-size:var(--24px);
  cursor:pointer;
  box-shadow:0 6px 24px rgba(0,0,0,0.28);
  transition:transform 0.35s cubic-bezier(0.32,0.72,0,1),
             background var(--transition), color var(--transition);
}
.a11y_toggle:hover{background:var(--color_accent);color:var(--color_on_accent);}
.a11y_toggle i{pointer-events:none;}

/* The panel grows out of the button, Dynamic Island style: it scales up from
   the bottom right corner while fading in, so the two read as one object. */
.a11y_panel{
  position:absolute;
  right:0;bottom:0;
  width:min(300px,calc(100vw - 32px));
  padding:var(--space_20);
  border-radius:var(--radius);
  border:var(--border_width) solid var(--color_line);
  background:var(--color_surface);
  box-shadow:0 12px 40px rgba(0,0,0,0.34);
  transform-origin:bottom right;
  transform:scale(0.2);
  opacity:0;
  visibility:hidden;
  transition:transform 0.42s cubic-bezier(0.32,0.72,0,1),
             opacity 0.24s ease,
             visibility 0.42s;
}
.a11y_launcher[data-open="true"] .a11y_panel{
  transform:scale(1);
  opacity:1;
  visibility:visible;
}
.a11y_launcher[data-open="true"] .a11y_toggle{transform:scale(0.85);opacity:0;pointer-events:none;}

.a11y_panel_head{
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--space_12);
  margin-bottom:var(--space_16);
}
.a11y_panel_head h2{font-size:var(--16px);}
.a11y_close{
  display:grid;place-items:center;
  width:32px;height:32px;
  border-radius:var(--radius_sm);
  border:var(--border_width) solid var(--color_line);
  background:transparent;color:var(--color_ink_muted);
  font-size:var(--18px);cursor:pointer;
  transition:color var(--transition), border-color var(--transition);
}
.a11y_close:hover{color:var(--color_accent);border-color:var(--color_accent);}

.a11y_option{
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--space_12);
  padding-block:var(--space_12);
  border-top:var(--border_width) solid var(--color_line);
  font-size:var(--16px);
}
.a11y_option:first-of-type{border-top:0;padding-top:0;}
.a11y_option_label{display:flex;align-items:center;gap:var(--space_8);}
.a11y_option_label i{font-size:var(--20px);color:var(--color_ink_muted);}

/* Switch */
.a11y_switch{
  position:relative;flex:0 0 auto;
  width:44px;height:26px;
  border-radius:100px;
  border:var(--border_width) solid var(--color_line);
  background:transparent;cursor:pointer;
  transition:background var(--transition), border-color var(--transition);
}
.a11y_switch::after{
  content:"";position:absolute;top:3px;left:3px;
  width:18px;height:18px;border-radius:100px;
  background:var(--color_ink_muted);
  transition:transform 0.28s cubic-bezier(0.32,0.72,0,1), background var(--transition);
}
.a11y_switch[aria-pressed="true"]{background:var(--color_accent);border-color:var(--color_accent);}
.a11y_switch[aria-pressed="true"]::after{transform:translateX(18px);background:var(--color_on_accent);}

.a11y_reset{
  width:100%;margin-top:var(--space_16);
  font-size:var(--14px);
}

@media (max-width:520px){
  .a11y_toggle{width:48px;height:48px;}
}

/* --- What the options actually do -------------------------------------- */

/* Larger text. The whole type scale is rem based, so one change moves it all */
:root[data-text-size="large"]{font-size:118%;}

/* Dyslexia friendly typeface.
   OpenDyslexic sets about 66% wider than Mona Sans at the same size, and
   already carries generous letter and word spacing in the font itself, so
   adding more here made it enormous. The size-adjust in each page's
   @font-face handles the scale, and headings drop the site's tight tracking
   because negative tracking works against letter recognition. */
:root[data-dyslexic="true"]{
  --font_body:'OpenDyslexic','Comic Sans MS',Verdana,sans-serif;
  --font_head:'OpenDyslexic','Comic Sans MS',Verdana,sans-serif;
}
:root[data-dyslexic="true"] h1,
:root[data-dyslexic="true"] h2,
:root[data-dyslexic="true"] h3,
:root[data-dyslexic="true"] .hero_title,
:root[data-dyslexic="true"] .brand_name{letter-spacing:normal;}

/* Underline every link, a common readability preference */
/* Every link, not just the ones in main. Work tiles are whole card links so
   an underline there would run under the image, and the skip link is already
   styled as a button when it appears. */
:root[data-underline="true"] a:not(.work_tile):not(.skip_link){
  text-decoration:underline;
  text-underline-offset:3px;
  text-decoration-thickness:1px;
}

/* Reduce motion on request, matching the media query behaviour */
:root[data-motion="reduced"] *,
:root[data-motion="reduced"] *::before,
:root[data-motion="reduced"] *::after{
  animation-duration:0.001ms !important;
  animation-iteration-count:1 !important;
  transition-duration:0.001ms !important;
  scroll-behavior:auto !important;
}

/* ==========================================================================
   18. RESPONSIVE
   ========================================================================== */
@media (max-width:1024px){
  .about_layout{grid-template-columns:minmax(0,1fr);}
  .about_media{position:static;aspect-ratio:16/10;}
  .work_grid,
  .work_grid_reverse{grid-template-columns:repeat(2,minmax(0,1fr));}
  .work_grid_three{grid-template-columns:repeat(2,minmax(0,1fr));}
  .stats_grid{width:100%;}
  .summary_grid{grid-template-columns:minmax(0,1fr);}
}

@media (max-width:900px){
  html{--header_height:64px;}
  .nav_links{display:none;}
  .header_actions .social_link{display:none;}
  .menu_toggle{display:flex;}
  .header_inner{min-height:64px;}

  /* Hero returns to a single column, copy first */
  .hero_layout,
  :root .hero_layout{
    grid-template-columns:minmax(0,1fr);
    gap:var(--space_32);
    align-items:start;
  }
  :root .hero_copy,
  :root .hero_stats{grid-column:1;grid-row:auto;}
  :root .hero_stats .stats_grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}

@media (max-width:720px){
  .work_grid,
  .work_grid_reverse,
  .work_grid_three{grid-template-columns:minmax(0,1fr);}
  .work_grid + .work_grid{margin-top:var(--space_24);}

  /* Heading and layout toggle share the first line, the link wraps below */
  .section_head{
    flex-direction:row;
    align-items:center;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:var(--space_12);
  }
  .section_head_left{
    flex:1 1 auto;
    justify-content:space-between;
  }
  .section_head .text_link{flex:1 0 100%;}
  .section_head h2{font-size:var(--24px);}

  .hero_section{text-align:left;}
  .hero_title{max-width:none;margin-inline:0;}
  .hero_lede{margin-inline:0;}
  .eyebrow{justify-content:flex-start;}

  /* Primary action sits on the right: forward motion, thumb friendly */
  .hero_actions{flex-direction:row-reverse;}
  .hero_actions .btn{flex:1;}

  .chip_item{font-size:var(--14px);}

  /* Layouts converge on mobile, so the switch has nothing to switch */
  .filter_row .view_toggle{display:none;}

  /* Quick nav becomes a single swipeable row rather than three stacked lines.
     Negative margins let it run to the screen edge so it reads as scrollable. */
  .filter_row{flex-wrap:nowrap;}
  .filter_bar{
    flex-wrap:nowrap;
    overflow-x:auto;
    overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    scroll-snap-type:x proximity;
    margin-inline:calc(-1 * clamp(20px,5vw,80px));
    padding-inline:clamp(20px,5vw,80px);
  }
  .filter_bar::-webkit-scrollbar{display:none;}
  .filter_item{
    flex:0 0 auto;
    scroll-snap-align:start;
  }

  .project_hero{text-align:left;}
  .project_hero .tag_list{justify-content:flex-start;}
  .project_title{margin-inline:0;}
  .project_lede{margin-inline:0;}

  .case_row{grid-template-columns:minmax(0,1fr);gap:var(--space_20);}
  .case_row.reverse .case_media{order:0;}
  .case_media_wide{aspect-ratio:16/9;}
  .case_text_center{text-align:left;}

  .project_nav .btn{flex:1;}
}

@media (max-width:520px){
  .stats_grid{
    width:100%;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:var(--space_20) var(--space_16);
  }
  .stat_item{flex-direction:column;gap:var(--space_8);}
  .stat_item i{width:32px;height:32px;font-size:var(--18px);}
  .stat_value{font-size:var(--16px);}
  .stat_caption{font-size:var(--14px);}
}