/*
Theme Name: Byteberry
Theme URI: https://byteberry.com/
Author: Byteberry
Description: A classic theme that recreates the 2009 byteberry.com design – coloured tiles, the menu bar and a colour scheme per page – as a responsive site with a built-in portfolio (categories, popup, drag-and-drop ordering). The centre column of every page can be built with the block editor or a page builder such as Elementor.
Version: 1.6.1
Requires at least: 6.3
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: byteberry
*/

/* =========================================================================
   Sizes: the whole layout is measured in tiles (--tile).
   Mobile-first; from 760px up – the original column layout.
   ========================================================================= */
:root{
  /* Page colour scheme (Home by default; every scheme is printed by functions.php) */
  --main:#72C15C; --accent:#6AB655; --light:#CCE686;
  /* Neutrals – from the original */
  --text:#6F6F6F; --line:#CCCCCC; --bg:#FFFFFF;
  --title:#8E8E8E; --slogan:#A2A2A2; --bullet:#B9B9B9; --muted:#8A8A8A;
  --logo-text:#A6A8AB; --logo-sub:#6D6E70;

  /* Base unit: ~32px phone, ~42px tablet, ~52px desktop */
  --tile: clamp(32px, calc(2.25vw + 23.2px), 52px);

  --fs-body:   clamp(16px, calc(15.56px + .11vw), 17px);
  --fs-menu:   clamp(18px, calc(17.1px + .23vw), 20px);
  --fs-sub:    clamp(15px, calc(14.56px + .11vw), 16px);
  --fs-cats:   clamp(17px, calc(16.56px + .11vw), 18px);
  --fs-small:  14px;
  --fs-title:  clamp(34px, calc(27.9px + 1.57vw), 48px);
  --fs-slogan: clamp(26px, calc(20.7px + 1.36vw), 38px);

  --font-body:   Verdana, "DejaVu Sans", Geneva, Tahoma, "Noto Sans", sans-serif;
  --font-title:  "Roboto", "Helvetica Neue", "Segoe UI Light", Arial, sans-serif;
  --font-slogan: "Roboto Condensed", "Arial Narrow", "Helvetica Neue", sans-serif;
  color-scheme: light;
}

/* Fonts hosted with the theme (SIL Open Font License, see assets/fonts/OFL.txt) */
@font-face{
  font-family:"Roboto"; font-style:normal; font-weight:300; font-display:swap;
  src:url("assets/fonts/roboto-light.woff") format("woff");
}
@font-face{
  font-family:"Roboto Condensed"; font-style:normal; font-weight:400; font-display:swap;
  src:url("assets/fonts/roboto-condensed-regular.woff") format("woff");
}

*,*::before,*::after{ box-sizing:border-box; }
[hidden]{ display:none !important; }
html{ -webkit-text-size-adjust:100%; }
html:has(dialog[open]){ overflow:hidden; }
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--font-body); font-size:var(--fs-body); line-height:1.6;
}
img{ max-width:100%; height:auto; }
a{ color:inherit; }
:focus-visible{ outline:2px solid var(--main); outline-offset:2px; }
.screen-reader-text{
  border:0; clip:rect(1px,1px,1px,1px); clip-path:inset(50%); height:1px; width:1px;
  margin:-1px; overflow:hidden; padding:0; position:absolute !important; word-wrap:normal !important;
}
.skip-link{ position:absolute; left:-9999px; top:0; background:var(--main); color:#fff; padding:8px 12px; z-index:100; }
.skip-link:focus{ left:8px; top:8px; }

.wrap{
  max-width:1200px; margin:0 auto;
  padding-left:max(16px, env(safe-area-inset-left, 0px));
  padding-right:max(16px, env(safe-area-inset-right, 0px));
  padding-block:calc(var(--tile) * .6) calc(var(--tile) * .8);
}

/* ---------- Top zone: bar + menu + categories + logo ---------- */
.site-header{ position:relative; display:flex; align-items:stretch; border-bottom:1px solid var(--line); }
.site-header::after{
  content:""; position:absolute; right:0; bottom:-1px;
  top:calc(var(--tile) * 1.1); width:1px; background:var(--line);
}
.bar{ flex:none; width:var(--tile); background:var(--main); }
.nav-main{ flex:1 1 auto; min-width:0; padding:calc(var(--tile)*.2) 0 calc(var(--tile)*.2) calc(var(--tile)*.27); }
.menu-toggle{
  display:inline-flex; align-items:center; gap:10px;
  font:inherit; font-size:var(--fs-menu); color:var(--text);
  background:none; border:0; padding:4px 0; cursor:pointer;
}
.no-js .menu-toggle{ display:none; }
.menu-toggle .icon{ display:grid; gap:4px; width:18px; }
.menu-toggle .icon span{ display:block; height:2px; background:currentColor; transition:transform .2s, opacity .2s; }
.menu-toggle[aria-expanded="true"] .icon span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .icon span:nth-child(2){ opacity:0; }
.menu-toggle[aria-expanded="true"] .icon span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }
.menu-toggle .current{ color:var(--accent); font-weight:700; }

.main-menu{ list-style:none; margin:0; padding:0; font-size:var(--fs-menu); }
.main-menu a{ display:block; text-decoration:none; line-height:calc(var(--tile) * .63); color:var(--text); }
.main-menu a:hover{ color:var(--accent); }
.main-menu a[aria-current], .main-menu .current-menu-item > a{ color:var(--accent); font-weight:700; }
.no-js .main-menu a{ line-height:1.3; padding:6px 0; }
.js .site-header:not(.is-open) .main-menu{ display:none; }
.site-header.is-open .main-menu{ margin-top:4px; padding-bottom:6px; }
.site-header.is-open .main-menu a{ line-height:1.3; padding:9px 0; }

/* Categories: a column in the top zone on desktop, a row of tabs on phones */
.subcats{ display:none; }
.subcats ul, .subtabs ul{ list-style:none; margin:0; padding:0; }
.subcats a{
  display:flex; align-items:flex-start; gap:8px; text-decoration:none; color:var(--text);
  font-size:var(--fs-cats); line-height:1.3; padding:calc(var(--tile)*.07) 0;
}
.subcats a::before{ content:""; flex:none; width:8px; height:8px; margin-top:calc(.65em - 4px); background:var(--bullet); }
.subcats a:hover{ color:var(--accent); }
.subcats a[aria-current]{ color:var(--accent); font-weight:700; }
.subcats a[aria-current]::before{ background:var(--main); }

.subtabs{ position:relative; margin-top:calc(var(--tile) * .45); margin-inline:calc(-1 * max(16px, env(safe-area-inset-left, 0px))); }
.subtabs ul{
  display:flex; gap:6px; overflow-x:auto; scroll-snap-type:x proximity; scrollbar-width:none;
  scroll-padding-inline:max(16px, env(safe-area-inset-left, 0px));
  padding:2px max(16px, env(safe-area-inset-left, 0px));
}
.subtabs ul::-webkit-scrollbar{ display:none; }
.subtabs li{ flex:none; scroll-snap-align:start; }
.subtabs a{
  display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:0 14px;
  border:1px solid var(--line); text-decoration:none; color:var(--text);
  font-size:var(--fs-cats); white-space:nowrap; background:var(--bg);
}
.subtabs a::before{ content:""; width:8px; height:8px; background:var(--bullet); }
.subtabs a[aria-current]{ background:var(--main); border-color:var(--main); color:#fff; font-weight:700; }
.subtabs a[aria-current]::before{ background:#fff; }
.subtabs.dragging ul{ scroll-snap-type:none; cursor:grabbing; }
.subtabs.dragging a{ pointer-events:none; }
.sc{
  position:absolute; top:0; bottom:0; z-index:1; width:52px; padding:0; border:0; cursor:pointer;
  display:flex; align-items:center; color:var(--main);
}
.sc svg{ width:18px; height:18px; }
.sc-prev{ left:0; justify-content:flex-start; padding-left:max(10px, env(safe-area-inset-left, 0px));
  background:linear-gradient(90deg, var(--bg) 50%, rgba(255,255,255,0)); }
.sc-next{ right:0; justify-content:flex-end; padding-right:max(10px, env(safe-area-inset-right, 0px));
  background:linear-gradient(270deg, var(--bg) 50%, rgba(255,255,255,0)); }

.site-logo{
  flex:none; align-self:flex-start; display:block; margin-left:auto;
  width:calc(var(--tile) * 2.7);
  padding:calc(var(--tile)*.18) calc(var(--tile)*.3) calc(var(--tile)*.18) 0;
}
.site-logo svg{ display:block; width:100%; height:auto; }
.site-logo .cls-1,.site-logo .cls-2,.site-logo .cls-3,.site-logo .cls-4{ fill-rule:evenodd; }
.site-logo .cls-1{ fill:var(--main); }
.site-logo .cls-4{ fill:var(--light); }
.site-logo .cls-3{ fill:var(--logo-text); }
.site-logo .cls-2{ fill:var(--logo-sub); }

/* ---------- Side title + photo in a frame of tiles ---------- */
.side{ position:relative; margin-top:calc(var(--tile) * .6); }
.page-title{
  margin:0 0 calc(var(--tile)*.35) var(--tile);
  font-family:var(--font-title); font-weight:300; font-size:var(--fs-title);
  line-height:1.1; letter-spacing:-.02em; color:var(--title); overflow-wrap:anywhere;
}
.tiles{
  position:relative; height:calc(var(--tile) * 9);
  --lc-l:1; --lc-t:0; --lc-w:5;
  --ph-l:2.75; --ph-t:1; --ph-s:6;
  --nt-t:7;
}
.tiles > *{ position:absolute; }
.t-light{
  left:calc(var(--tile) * var(--lc-l)); top:calc(var(--tile) * var(--lc-t)); bottom:0;
  width:calc(var(--tile) * var(--lc-w)); background:var(--light);
}
.t-notch{
  left:calc(var(--tile) * var(--lc-l)); top:calc(var(--tile) * var(--nt-t));
  width:calc(var(--tile) * (var(--ph-l) - var(--lc-l))); height:var(--tile); background:var(--bg);
}
.t-dark{ left:0; top:calc(var(--tile) * var(--nt-t)); width:var(--tile); height:var(--tile); background:var(--main); }
.t-photo{
  left:calc(var(--tile) * var(--ph-l)); top:calc(var(--tile) * var(--ph-t));
  width:calc(var(--tile) * var(--ph-s)); height:calc(var(--tile) * var(--ph-s));
  background:var(--main); padding:calc(var(--tile) * .28); margin:0;
}
.t-photo .photo{ position:relative; width:100%; height:100%; overflow:hidden; background:var(--light); }
.t-photo .photo img, .t-photo .photo svg{ display:block; width:100%; height:100%; object-fit:cover; }
.t-photo .photo::after{ content:""; position:absolute; inset:0; box-shadow:inset 0 0 0 1px rgba(255,255,255,.6); pointer-events:none; }
/* Real photos include their own frame and fill the whole box */
.t-photo.has-photo{ padding:0; }
.t-photo.has-photo .photo::after{ display:none; }

/* ---------- Slogan and content ---------- */
.main{ padding-top:calc(var(--tile) * .8); min-width:0; }
.slogan{
  margin:0 0 calc(var(--tile) * .7);
  font-family:var(--font-slogan); font-weight:400; font-size:var(--fs-slogan);
  line-height:1.15; letter-spacing:-.015em; color:var(--slogan); text-wrap:balance;
}
.slogan em{ font-style:normal; color:var(--main); }
.slogan .l2{ display:block; }

.content{ max-width:40em; overflow-wrap:break-word; }
/* Page-builder pages (Elementor): full width of the centre column, no theme text styles */
.content.is-builder{ max-width:none; }

.entry > *:first-child{ margin-top:0; }
.entry p{ margin:0 0 1.1em; }
.entry h2, .entry h3, .entry h4{ font-size:var(--fs-body); font-weight:700; line-height:1.4; margin:1.6em 0 .4em; color:var(--text); }
.entry h2 + p, .entry h3 + p, .entry h4 + p,
.entry h2 + ul, .entry h3 + ul, .entry h4 + ul{ margin-top:0; }
.entry ul{ list-style:none; margin:0 0 1.1em; padding:0; }
.entry ul li{ position:relative; padding-left:16px; }
.entry ul li::before{ content:""; position:absolute; left:0; top:.68em; width:6px; height:6px; background:var(--bullet); }
.entry ol{ margin:0 0 1.1em; padding-left:1.4em; }
.entry a{ color:var(--text); text-decoration-color:var(--bullet); text-underline-offset:2px; }
.entry a:hover{ color:var(--accent); text-decoration-color:currentColor; }
.entry strong, .entry b{ font-weight:700; }
.entry img{ display:block; }
.entry figure{ margin:0 0 1.1em; }
.entry figcaption{ font-size:var(--fs-small); color:var(--muted); }
.entry blockquote{ margin:0 0 1.1em; padding-left:16px; border-left:4px solid var(--light); }
.entry .wp-block-button__link{ background:var(--main); color:#fff; border-radius:0; text-decoration:none; }
.entry hr{ border:0; border-top:1px solid var(--line); margin:1.6em 0; }

/* ---------- Portfolio: project grid ---------- */
.section-head{ display:flex; align-items:baseline; flex-wrap:wrap; gap:4px 12px; margin:calc(var(--tile)*.5) 0 calc(var(--tile)*.3); }
.section-head h2{ margin:0; font-size:var(--fs-body); font-weight:700; color:var(--text); }
.section-head .count{ font-size:var(--fs-small); }
.grid{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:calc(var(--tile) * .3); }
.card a{
  display:flex; flex-direction:column; height:100%; text-decoration:none; color:var(--text);
  background:var(--bg); border:1px solid var(--line); transition:border-color .15s, box-shadow .15s;
}
.card .thumb{ display:block; aspect-ratio:4 / 3; overflow:hidden; border-bottom:1px solid var(--line); background:#f4f4f2; }
.card .thumb img{ display:block; width:100%; height:100%; object-fit:cover; transition:transform .25s; }
.card .cap{ display:block; padding:8px 10px 10px; }
.card .name{ display:block; font-size:var(--fs-sub); line-height:1.3; }
.card .cat{ display:block; margin-top:3px; font-size:var(--fs-small); line-height:1.3; color:var(--muted); }
.card a:hover, .card a:focus-visible{ border-color:var(--main); box-shadow:0 0 0 1px var(--main); outline:none; }
.card a:hover .name, .card a:focus-visible .name{ color:var(--accent); }
.card a:hover .thumb img{ transform:scale(1.03); }
.card .desc{ display:block; margin-top:4px; font-size:var(--fs-small); line-height:1.4; color:var(--muted); }
.portfolio-section + .portfolio-section{ margin-top:calc(var(--tile) * .8); }
.section-head h2 a{ color:inherit; text-decoration:none; }
.section-head h2 a:hover{ color:var(--accent); }

/* Placeholder until a project picture is added */
.thumb-ph{
  position:relative; display:flex; align-items:flex-end; width:100%; height:100%;
  background:var(--light); overflow:hidden;
}
.thumb-ph::before{ content:""; position:absolute; right:0; top:0; width:28%; aspect-ratio:1; background:var(--main); }
.thumb-ph::after{ content:""; position:absolute; right:28%; top:28%; width:14%; aspect-ratio:1; background:var(--bg); opacity:.7; }
.thumb-ph span{
  position:relative; padding:8%; font-family:var(--font-slogan); font-size:clamp(18px, 2.2vw, 26px);
  line-height:1.05; color:var(--bg); text-shadow:0 1px 2px rgba(0,0,0,.08);
}
.lb-media .thumb-ph span{ font-size:clamp(28px, 4vw, 48px); }

/* Tags */
.tags{ list-style:none; margin:0 0 1em; padding:0; display:flex; flex-wrap:wrap; gap:6px; }
.tags li{ font-size:var(--fs-small); line-height:1.3; padding:4px 8px; border:1px solid var(--line); color:var(--text); }
.tags li::before{ display:none; }
.entry ul.tags li{ padding:4px 8px; }
.entry ul.tags li::before{ display:none; }

/* Content helpers used by the imported texts */
.entry .bb-links{ display:flex; flex-wrap:wrap; gap:6px calc(var(--tile) * .5); margin-top:1.6em; }
.entry .bb-links a{ color:var(--main); font-weight:700; text-decoration:none; }
.entry .bb-links a:hover{ color:var(--accent); text-decoration:underline; }
.entry ol.bb-steps{ list-style:none; counter-reset:bb-step; padding:0; margin:0 0 1.1em; display:grid; gap:.8em; }
.entry ol.bb-steps li{ counter-increment:bb-step; position:relative; padding-left:calc(var(--tile) * .85); min-height:calc(var(--tile) * .6); }
.entry ol.bb-steps li::before{
  content:counter(bb-step); position:absolute; left:0; top:.1em;
  width:calc(var(--tile) * .6); height:calc(var(--tile) * .6); display:grid; place-items:center;
  background:var(--main); color:#fff; font-weight:700; font-size:var(--fs-small);
}
.entry ul.bb-contact li{ padding-left:0; margin-bottom:.6em; }
.entry ul.bb-contact li::before{ display:none; }
.entry ul.bb-contact .label{ display:block; font-size:var(--fs-small); color:var(--muted); }
.entry ul.bb-contact a{ font-size:calc(var(--fs-body) * 1.15); color:var(--text); text-decoration-color:var(--main); }
.empty-note{ padding:calc(var(--tile)*.4); border:1px dashed var(--line); font-size:var(--fs-sub); }

/* ---------- Single project ---------- */
.project-media{ background:var(--light); padding:calc(var(--tile) * .3); margin:0 0 calc(var(--tile)*.5); max-width:40em; }
.project-media img{ display:block; width:100%; height:auto; }
.project-meta{ margin:0 0 6px; display:flex; align-items:center; gap:8px; font-size:var(--fs-small); color:var(--main); }
.project-meta::before{ content:""; width:7px; height:7px; background:var(--main); }
.project-meta a{ color:var(--main); text-decoration:none; }
.project-title{
  margin:0 0 calc(var(--tile)*.3); font-family:var(--font-slogan); font-weight:400;
  font-size:clamp(26px, calc(22px + 1vw), 34px); line-height:1.15; color:var(--text); text-wrap:balance;
}
.project-tech{ font-size:var(--fs-small); color:var(--muted); }
.project-link a, .lb-link{
  display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:0 16px;
  background:var(--main); color:#fff; text-decoration:none; font-size:var(--fs-sub);
}
.project-link a:hover, .lb-link:hover{ background:var(--accent); color:#fff; }
.project-pager{ display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-top:calc(var(--tile)*.6); padding-top:calc(var(--tile)*.3); border-top:1px solid var(--line); max-width:40em; font-size:var(--fs-sub); }
.project-pager a{ text-decoration:none; color:var(--text); }
.project-pager a:hover{ color:var(--accent); }

/* ---------- Bottom navigation + decorative tiles ---------- */
.bottom{
  position:relative; display:flex; align-items:flex-end;
  min-height:var(--tile); margin-top:calc(var(--tile) * 2.6);
  padding-right:calc(var(--tile) * 2.3);
}
.subnav ul{
  list-style:none; margin:0; padding:0 0 2px;
  display:flex; flex-wrap:wrap; gap:4px calc(var(--tile) * .34);
  font-size:var(--fs-small); line-height:1.5;
}
.subnav a{ display:inline-flex; align-items:center; gap:6px; text-decoration:none; color:var(--text); }
.subnav a::before{ content:""; width:6px; height:6px; background:var(--bullet); flex:none; }
.subnav a:hover{ color:var(--accent); }
.subnav a[aria-current], .subnav .current-menu-item > a{ color:var(--main); }
.subnav a[aria-current]::before, .subnav .current-menu-item > a::before{ background:var(--main); }
.deco-dark, .deco-light{ position:absolute; }
.deco-dark{ right:var(--tile); bottom:0; width:var(--tile); height:var(--tile); background:var(--main); }
.deco-light{ right:0; bottom:var(--tile); width:var(--tile); height:calc(var(--tile) * 2); background:var(--light); }

.site-footer{
  margin-top:calc(var(--tile) * .9); font-size:var(--fs-small); line-height:1.5;
  display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:8px calc(var(--tile) * .6);
}
.site-footer .copyright{ margin:0; }
.site-footer a{ color:var(--text); }

/* Language switcher (Polylang): footer, and inside the open phone menu */
.lang-switch ul{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:4px calc(var(--tile) * .34); }
.lang-switch a{ display:inline-flex; align-items:center; gap:6px; text-decoration:none; color:var(--text); }
.lang-switch a::before{ content:""; width:6px; height:6px; background:var(--bullet); flex:none; }
.lang-switch a:hover{ color:var(--accent); }
.lang-switch a[aria-current]{ color:var(--main); font-weight:700; }
.lang-switch a[aria-current]::before{ background:var(--main); }
.lang-switch--footer{ font-size:var(--fs-small); }
.lang-switch--menu{ display:none; }
.js .site-header.is-open .lang-switch--menu{
  display:block; margin-top:6px; padding:12px 0 8px; border-top:1px solid var(--line); font-size:var(--fs-sub);
}
.js .site-header.is-open .lang-switch--menu a{ padding:6px 0; }

/* ---------- Popup (lightbox) ---------- */
.lb{
  position:fixed; inset:0; width:100%; height:100%; height:100dvh; max-width:none; max-height:none;
  margin:0; padding:0; border:0; background:transparent; color:var(--text);
}
.lb[open]{ display:flex; align-items:center; justify-content:center; }
.lb::backdrop{ background:rgba(40,40,40,.62); }
.lb-panel{
  position:relative; width:100%; height:100%; overflow:auto; background:var(--bg);
  display:flex; flex-direction:column; border-top:calc(var(--tile) * .25) solid var(--main);
  padding-bottom:env(safe-area-inset-bottom, 0px);
}
.lb-media{ position:relative; flex:none; background:var(--light); padding:calc(var(--tile) * .3); touch-action:pan-y; user-select:none; }
.lb-media .frame{ display:flex; align-items:center; justify-content:center; aspect-ratio:4 / 3; background:#f4f4f2; overflow:hidden; }
.lb-media img{ display:block; width:100%; height:100%; object-fit:contain; }
.lb-info{ flex:1 0 auto; display:flex; flex-direction:column; padding:calc(var(--tile)*.5) max(16px, calc(var(--tile)*.5)) max(16px, calc(var(--tile)*.4)); }
.lb-cat{ margin:0 0 6px; display:flex; align-items:center; gap:8px; font-size:var(--fs-small); color:var(--main); }
.lb-cat::before{ content:""; width:7px; height:7px; background:var(--main); }
.lb-title{
  margin:0 0 calc(var(--tile)*.3); font-family:var(--font-slogan); font-weight:400;
  font-size:clamp(26px, calc(22px + 1vw), 34px); line-height:1.15; color:var(--text); text-wrap:balance;
}
.lb-desc{ margin:0 0 .8em; white-space:pre-line; }
.lb-more{ margin:0; }
.lb-nav{ margin-top:auto; padding-top:calc(var(--tile)*.5); display:flex; align-items:center; justify-content:space-between; gap:12px; }
.lb-count{ font-size:var(--fs-small); font-variant-numeric:tabular-nums; }
.lb-btn{ width:48px; height:48px; display:inline-grid; place-items:center; flex:none; border:0; border-radius:0; background:var(--main); color:#fff; cursor:pointer; }
.lb-btn:hover{ background:var(--accent); }
.lb-btn svg{ width:20px; height:20px; }
.lb-btn:focus-visible{ outline-offset:-5px; outline-color:#fff; box-shadow:inset 0 0 0 2px var(--main); }
.lb-close{
  position:absolute; top:calc(var(--tile) * .25 + 8px); right:8px; z-index:2;
  width:44px; height:44px; display:grid; place-items:center;
  background:var(--bg); color:var(--text); border:1px solid var(--line); border-radius:0; cursor:pointer;
}
.lb-close:hover{ color:var(--main); border-color:var(--main); }
.lb-close:focus-visible{ outline-offset:-5px; }
.lb-close svg{ width:18px; height:18px; }

/* ================= Tablet and desktop: the original layout ================= */
@media (min-width:760px){
  .layout{
    display:grid;
    grid-template-columns:calc(var(--tile) * 6.75) var(--tile) minmax(0,1fr);
    grid-template-rows:auto 1fr auto;
    min-height:calc(var(--tile) * 13.4);
  }
  .site-header{ grid-column:2 / 4; grid-row:1; min-height:calc(var(--tile) * 3.45); }
  .site-header::after{ top:calc(var(--tile) * 1.3); }
  .menu-toggle{ display:none; }
  .js .site-header:not(.is-open) .main-menu{ display:block; }
  .site-header.is-open .main-menu{ margin-top:0; padding-bottom:0; }
  .site-header .main-menu a, .no-js .main-menu a{ line-height:calc(var(--tile) * .63); padding:0; }
  .nav-main{ flex:0 0 calc(var(--tile) * 4); }
  .subcats{ display:block; flex:0 1 auto; min-width:0; padding-top:calc(var(--tile) * .16); padding-right:8px; }
  .subtabs{ display:none; }
  .site-logo{ width:calc(var(--tile) * 3.2); padding:calc(var(--tile)*.2) calc(var(--tile)*.33) 0 calc(var(--tile)*.3); }

  .side{ grid-column:1; grid-row:1 / 4; margin:0; }
  .page-title{
    margin:0; margin-left:var(--tile); width:calc(var(--tile) * 4.75);
    height:calc(var(--tile) * 2.55); display:flex; align-items:center; justify-content:center; text-align:center;
  }
  .tiles{
    position:absolute; inset:0; height:auto;
    --lc-t:2.55; --lc-w:4.75;
    --ph-l:2.75; --ph-t:4.8; --ph-s:4;
    --nt-t:8.8;
  }
  /* The tiles follow the bottom line of the top zone, however many menu items there are. */
  @supports (grid-template-rows: subgrid){
    .side{ display:grid; grid-template-rows:subgrid; grid-template-columns:minmax(0,1fr); align-content:start; }
    .page-title{ grid-row:1; align-self:start; }
    .tiles{
      position:relative; inset:auto; grid-row:2 / 4; grid-column:1;
      --lc-t:-0.9; --ph-t:1.35; --nt-t:5.35;
    }
  }
  .t-photo{ padding:calc(var(--tile) * .3); }
  .t-photo.has-photo{ padding:0; }

  .main{ grid-column:3; grid-row:2; padding:calc(var(--tile) * .6) var(--tile) calc(var(--tile) * .9) 0; min-height:calc(var(--tile) * 6.6); }
  .slogan .l2{ padding-left:calc(var(--tile) * 2.5); }
  .grid{ grid-template-columns:repeat(3, minmax(0,1fr)); }
  .bottom{ grid-column:2 / 4; grid-row:3; margin-top:0; }
  .deco-light{ height:calc(var(--tile) * 3.15); }
  .site-footer{ margin-left:var(--tile); padding-right:var(--tile); }
  .js .site-header.is-open .lang-switch--menu{ display:none; }

  .lb{ padding:calc(var(--tile) * .8); }
  .lb-panel{
    width:min(1040px, 100%); height:auto; max-height:100%;
    display:grid; grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);
    border-top:0; border-left:var(--tile) solid var(--main); padding-bottom:0;
  }
  .lb-media{ align-self:start; }
  .lb-info{ padding:calc(var(--tile)*.7) calc(var(--tile)*.6) calc(var(--tile)*.5); }
  .lb-close{ top:0; right:0; }
}
@media (min-width:1100px){
  .nav-main{ flex-basis:calc(var(--tile) * 4.4); }
  /* Many categories: two columns, so the top zone stays low */
  .subcats.is-long ul{ columns:2; column-gap:calc(var(--tile) * .5); }
  .subcats.is-long li{ break-inside:avoid; }
  .grid{ grid-template-columns:repeat(4, minmax(0,1fr)); }
}

@media (prefers-reduced-motion:reduce){ *{ transition:none !important; animation:none !important; } }