:root{
  --ink:#111;
  --paper:#fff;
  --soft:#f4f4f0;
  --line:#deded9;
  --muted:#73736d;
  --aqua:#a9e8e2;
  --aqua-dark:#55bfb5;
  --warm:#eee7dc;
  --green:#e3eee3;
  --blue:#e3eff1;
}

*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--paper);color:var(--ink)}
html{scroll-behavior:smooth}
body{font-family:Arial,Helvetica,sans-serif;-webkit-font-smoothing:antialiased}
button,a{font:inherit}
button{color:inherit}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}

.topbar{
  height:84px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding:10px 28px;
  border-bottom:1px solid var(--line);
  background:#fff;
}
.brand img{
  width:64px;
  height:64px;
  object-fit:contain;
}
.utility-nav{
  display:flex;
  align-items:center;
  gap:25px;
  font-size:14px;
}
.utility-nav a,
.utility-nav button{
  padding:7px 0;
  border:0;
  border-bottom:1px solid transparent;
  background:transparent;
  cursor:pointer;
}
.utility-nav a:hover,
.utility-nav button:hover{border-color:#111}

.home{
  min-height:calc(100vh - 84px);
  display:grid;
  grid-template-columns:minmax(350px,.78fr) minmax(650px,1.22fr);
}
.intro{
  display:flex;
  align-items:flex-end;
  padding:40px 42px 48px 32px;
  border-right:1px solid var(--line);
  background:#fff;
}
.intro-inner{max-width:670px}
.small-title{
  margin:0 0 25px;
  color:var(--muted);
  font-size:13px;
}
.intro h1{
  margin:0;
  font-size:clamp(43px,4.35vw,74px);
  line-height:.975;
  letter-spacing:-.058em;
  font-weight:500;
}

.category-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  grid-template-rows:1fr 1fr;
  min-height:calc(100vh - 84px);
}
.category{
  position:relative;
  min-width:0;
  display:flex;
  flex-direction:column;
  text-align:left;
  border:0;
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background:#fff;
  padding:19px 20px 18px;
  cursor:pointer;
  overflow:hidden;
  transition:background .2s ease, transform .2s ease;
}
.category:nth-child(2n){border-right:0}
.category:nth-child(n+3){border-bottom:0}
.category:hover{background:#f7f7f4}
.category:focus-visible{outline:3px solid var(--aqua-dark);outline-offset:-3px}

.category-visual{
  position:relative;
  flex:1;
  min-height:145px;
  margin-bottom:14px;
}
.category-copy{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:18px;
}
.category-copy h2{
  margin:0;
  max-width:315px;
  font-size:clamp(25px,2.05vw,36px);
  line-height:.96;
  letter-spacing:-.043em;
  font-weight:500;
}
.category-copy p{
  margin:7px 0 0;
  color:var(--muted);
  font-size:12px;
}
.view-link{
  flex:none;
  padding-bottom:2px;
  font-size:12px;
  color:var(--muted);
  white-space:nowrap;
  transition:transform .18s ease,color .18s ease;
}
.category:hover .view-link{
  color:#111;
  transform:translate(2px,-2px);
}

/* Online */
.category-online{background:#fbfdfd}
.online-window{
  position:absolute;
  width:min(79%,285px);
  height:145px;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%) rotate(-2deg);
  border:2px solid #111;
  border-radius:10px;
  background:#fff;
  box-shadow:10px 12px 0 rgba(0,0,0,.035);
}
.window-head{
  height:27px;
  display:flex;
  align-items:center;
  gap:5px;
  padding-left:9px;
  border-bottom:1px solid #aaa;
}
.window-head i{
  width:6px;height:6px;border:1px solid #111;border-radius:50%;
}
.window-grid{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  grid-template-rows:1fr 1fr;
  gap:7px;
  height:calc(100% - 27px);
  padding:10px;
}
.tile{border:1px solid #aaa;background:#f5f5f2}
.t1{grid-row:1 / span 2;background:#dff3f0}
.t3{background:#eee9df}
.t4{background:#e4edf0}

/* Hybrid */
.category-hybrid{background:#fbfbfb}
.hybrid-tablet{
  position:absolute;
  width:47%;
  height:68%;
  left:27%;
  top:14%;
  border:2px solid #111;
  border-radius:10px;
  background:#e9f2f1;
  transform:rotate(3deg);
  box-shadow:9px 10px 0 rgba(0,0,0,.035);
}
.hybrid-role{
  position:absolute;
  width:54px;
  height:78px;
  border:2px solid #111;
  background:#fff;
}
.hr1{left:15%;bottom:7%;transform:rotate(-11deg)}
.hr2{right:13%;top:10%;transform:rotate(9deg);background:var(--aqua)}
.hr3{right:21%;bottom:3%;transform:rotate(-4deg);background:#eee7dc}
.hybrid-piece{
  position:absolute;
  width:21px;height:21px;border-radius:50%;background:#111
}
.hp1{left:44%;bottom:8%}
.hp2{right:35%;bottom:16%;background:var(--aqua-dark)}

/* Board */
.category-board{background:#fcfcfa}
.board-hex{
  position:absolute;
  width:96px;height:83px;
  clip-path:polygon(25% 6.7%,75% 6.7%,100% 50%,75% 93.3%,25% 93.3%,0 50%);
  border:1px solid #999;
  background:#fff;
}
.bh-home1{left:14%;top:8%;background:#dfeaec}
.bh-home2{left:36%;top:28%;background:#eee8d4}
.bh-home3{right:15%;top:8%;background:#e1eddf}
.bh-home4{right:27%;bottom:1%;background:#fff}
.bh-home5{left:18%;bottom:2%;background:#efe9e2}
.home-piece{
  position:absolute;
  width:18px;height:28px;
  border-radius:50% 50% 28% 28%;
  background:#111;
}
.hmp1{left:29%;top:31%}
.hmp2{right:36%;top:43%;background:var(--aqua-dark)}
.hmp3{right:19%;bottom:14%;background:#bd7e54}

/* Books */
.category-books{background:#fcfbf8}
.visual-books{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:13px;
}
.home-book{
  width:76px;
  height:112px;
  border:2px solid #111;
  background:#fff;
  box-shadow:8px 9px 0 rgba(0,0,0,.04);
  padding:11px 7px;
}
.home-book span{
  font-size:6px;
  letter-spacing:.11em;
}
.hb1{transform:rotate(-8deg);background:#f1e4d0}
.hb2{transform:translateY(-12px);background:#eee9dd}
.hb3{transform:rotate(8deg);background:#dceeed}

@media(max-width:1000px){
  .home{grid-template-columns:1fr;min-height:auto}
  .intro{
    min-height:42vh;
    border-right:0;
    border-bottom:1px solid var(--line);
  }
  .category-grid{min-height:70vh}
}
@media(max-width:680px){
  .topbar{height:76px;padding:8px 16px}
  .brand img{width:58px;height:58px}
  .utility-nav{gap:15px;font-size:13px}
  .intro{padding:34px 18px 38px;min-height:47vh}
  .intro h1{font-size:clamp(43px,12.3vw,63px)}
  .category-grid{grid-template-columns:1fr;grid-template-rows:none;min-height:0}
  .category{
    min-height:245px;
    border-right:0!important;
    border-bottom:1px solid var(--line)!important;
    padding:17px 18px;
  }
  .category:last-child{border-bottom:0!important}
  .category-visual{min-height:118px}
  .category-copy h2{font-size:31px}
}

/* panels */
.panel{
  position:fixed;
  inset:0;
  z-index:100;
  display:flex;
  flex-direction:column;
  background:#fff;
  opacity:0;
  pointer-events:none;
  transform:translateY(18px);
  transition:opacity .18s ease,transform .18s ease;
}
.panel.open{
  opacity:1;
  pointer-events:auto;
  transform:none;
}
.panel-header{
  flex:none;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:24px;
  padding:22px 28px 20px;
  border-bottom:1px solid var(--line);
}
.panel-header>div{display:grid;grid-template-columns:55px 1fr;column-gap:18px;align-items:end}
.panel-number{grid-row:1 / span 2;align-self:start;padding-top:6px;color:var(--muted);font-size:12px}
.panel-header h2{
  margin:0;
  font-size:clamp(34px,4.3vw,66px);
  line-height:.9;
  letter-spacing:-.055em;
  font-weight:500;
}
.panel-header p{
  margin:9px 0 0;
  color:var(--muted);
  font-size:13px;
}
.close-panel{
  flex:none;
  width:52px;height:52px;border:1px solid #111;border-radius:50%;
  background:#fff;font-size:34px;line-height:1;cursor:pointer
}
.close-panel:hover{background:#111;color:#fff}

.projects{
  flex:1;
  min-height:0;
  display:grid;
  gap:14px;
  padding:14px 18px 20px;
  overflow:auto;
}
.projects-five{
  grid-template-columns:repeat(3,minmax(230px,1fr));
  grid-auto-rows:minmax(270px,1fr);
}
.projects-two{
  grid-template-columns:1.35fr .65fr;
}
.books-projects{
  grid-template-columns:repeat(4,minmax(205px,1fr));
}
.project{
  min-width:0;
  display:flex;
  flex-direction:column;
}
.project.featured{}
.project-art{
  position:relative;
  flex:1;
  min-height:190px;
  overflow:hidden;
  background:var(--soft);
}
.project-meta{
  flex:none;
  min-height:72px;
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
  padding:12px 2px 6px;
}
.project-meta span{color:var(--muted);font-size:11px}
.project-meta h3{
  margin:4px 0 0;
  font-size:clamp(19px,1.8vw,29px);
  line-height:1;
  letter-spacing:-.035em;
  font-weight:500;
}
.action,.status{
  flex:none;
  align-self:center;
  border:1px solid #111;
  border-radius:999px;
  padding:8px 12px;
  font-size:11px!important;
  color:#111!important;
}
.action:not(.disabled):hover{background:#111;color:#fff!important}
.action.disabled{opacity:.42;cursor:default}
.status{border-color:#bbb;color:#777!important;background:#fafafa}
.actions{display:flex;gap:6px;align-items:center}

/* online visuals */
.art-energy{background:#dff4f1}
.browser-card{
  position:absolute;inset:12% 9%;border:2px solid #111;border-radius:10px;background:rgba(255,255,255,.88)
}
.browser-head{height:30px;border-bottom:1px solid #999}
.pin{position:absolute;width:16px;height:16px;border-radius:50%;background:#111;border:4px solid #fff}
.pin1{left:19%;top:37%}.pin2{left:48%;top:59%}.pin3{right:14%;top:33%}
.route{position:absolute;height:2px;background:#55bfb5;transform-origin:left}
.route1{width:36%;left:24%;top:44%;transform:rotate(24deg)}
.route2{width:29%;left:53%;top:61%;transform:rotate(-38deg)}

.art-tourism{background:#e8efdd}
.island{
  position:absolute;background:#fff;border:2px solid #b9c6ad;border-radius:48% 52% 45% 55%
}
.i1{width:42%;height:33%;left:8%;top:17%;transform:rotate(-8deg)}
.i2{width:38%;height:28%;right:8%;top:39%;transform:rotate(7deg)}
.i3{width:32%;height:22%;left:31%;bottom:7%}
.tourism-piece{position:absolute;width:15px;height:25px;border-radius:50% 50% 25% 25%;background:#111}
.tp1{left:31%;top:34%}.tp2{right:25%;top:49%;background:#c57b50}

.art-surface{background:#efefed}
.phone{
  position:absolute;width:28%;height:66%;border:2px solid #111;border-radius:14px;background:#fff
}
.phone:after{content:"";position:absolute;width:10px;height:10px;border-radius:50%;background:#111;bottom:9px;left:50%;transform:translateX(-50%)}
.phone1{left:20%;top:14%;transform:rotate(-11deg)}
.phone2{right:21%;top:18%;transform:rotate(12deg);background:#dcefeb}
.surface-arrow{position:absolute;left:47%;top:42%;font-size:44px}

.art-mini{display:flex;align-items:center;justify-content:center;gap:12px;background:#f3eee6}
.mini-shape{width:52px;height:52px;border:2px solid #111;background:#fff}
.ms1{border-radius:50%}.ms2{transform:rotate(45deg);background:var(--aqua)}.ms3{border-radius:50% 50% 8px 8px}
.ms4{transform:translateY(-30px);background:#111}.ms5{transform:translateY(25px);border-radius:50%}

.art-escape{background:#ece9e4}
.escape-door{
  position:absolute;width:34%;height:70%;left:33%;bottom:0;border:3px solid #111;background:#fff
}
.door-knob{position:absolute;width:9px;height:9px;border-radius:50%;background:#111;right:14px;top:50%}
.escape-key{
  position:absolute;width:60px;height:20px;left:16%;top:22%;border:5px solid #111;border-radius:20px;transform:rotate(-18deg)
}
.escape-key:after{content:"";position:absolute;width:48px;height:5px;background:#111;left:48px;top:3px}

/* hybrid visuals */
.art-blackbox{background:#111}
.blackbox{
  position:absolute;width:34%;height:42%;left:34%;top:27%;background:#202020;border:1px solid #606060;box-shadow:0 20px 55px rgba(0,0,0,.5)
}
.blackbox-screen{
  position:absolute;width:31%;height:27%;left:8%;top:14%;background:#e1f1ef;border:2px solid #fff;transform:rotate(-5deg)
}
.role-card{
  position:absolute;width:13%;height:34%;background:#fff;border:2px solid #111
}
.rc1{right:14%;top:10%;transform:rotate(9deg)}
.rc2{right:7%;bottom:10%;transform:rotate(-6deg);background:var(--aqua)}
.rc3{left:14%;bottom:8%;transform:rotate(7deg)}
.art-hybrid-more{background:#eef4f3}
.hybrid-circle{position:absolute;width:150px;height:150px;border:2px solid #111;border-radius:50%;left:50%;top:50%;transform:translate(-50%,-50%)}
.hybrid-plus{position:absolute;left:50%;top:50%;transform:translate(-50%,-53%);font-size:82px;font-weight:200}

/* board visuals */
.art-island-board{background:#dfeade}
.bighex{
  position:absolute;width:180px;height:156px;background:#fff;
  clip-path:polygon(25% 6.7%,75% 6.7%,100% 50%,75% 93.3%,25% 93.3%,0 50%)
}
.bh1{left:12%;top:9%;background:#d4e7ee}.bh2{left:32%;top:27%;background:#eee7c9}.bh3{left:52%;top:9%;background:#dcecd8}.bh4{right:8%;top:29%;background:#e4dfd7}.bh5{left:41%;bottom:5%}
.board-person{position:absolute;width:22px;height:34px;border-radius:50% 50% 30% 30%;background:#111}
.bp1{left:29%;top:31%}.bp2{left:49%;top:51%;background:#55bfb5}.bp3{right:21%;top:40%;background:#c87b4b}
.dice{
  position:absolute;width:66px;height:66px;right:12%;bottom:9%;display:grid;place-items:center;background:#fff;border:2px solid #111;transform:rotate(8deg)
}
.dice span{font-size:26px}
.art-board-more{background:#f0eee8}
.board-stack{
  position:absolute;width:42%;height:28%;left:29%;border:2px solid #111;background:#fff
}
.bs1{top:20%;transform:rotate(-6deg)}.bs2{top:36%;transform:rotate(3deg);background:#dcefeb}.bs3{top:52%;transform:rotate(-2deg);background:#e8e0ca}

/* book visuals */
.book-art{display:flex;align-items:center;justify-content:center}
.treasure-cover{background:#e9ddc9}.museum-cover{background:#ece8df}.underwater-cover{background:#dceeed}.escape-book{background:#f0f0ed}
.cover{
  width:58%;max-width:210px;aspect-ratio:.68;
  display:flex;flex-direction:column;justify-content:space-between;
  padding:22px 16px;border:2px solid #111;background:#fff;box-shadow:13px 15px 0 rgba(0,0,0,.09)
}
.cover>span{font-size:9px;letter-spacing:.18em;color:#111}
.cover strong{font-size:clamp(23px,2.4vw,36px);line-height:.92;font-weight:500;letter-spacing:-.04em}
.cover small{font-size:9px;color:#666}
.treasure-cover .cover{background:#fbf4e8}.museum-cover .cover{background:#faf7ef}.underwater-cover .cover{background:#effafa}
.outline-cover{background:transparent;border-style:dashed;box-shadow:none}

.utility-panel .panel-header>div{grid-template-columns:1fr}
.utility-panel .panel-number{grid-row:auto;margin-bottom:8px}
.utility-content{
  flex:1;display:flex;align-items:flex-end;padding:40px 30px 55px
}
.utility-content p{
  margin:0;max-width:1050px;font-size:clamp(38px,6vw,88px);line-height:.98;letter-spacing:-.055em
}
.contact-placeholder{color:#777}

@media(max-width:1000px){
  body{overflow:auto}
  .home{grid-template-columns:1fr;min-height:auto}
  .intro{min-height:42vh;border-right:0;border-bottom:1px solid var(--line)}
  .category-grid{min-height:70vh}
  .projects-five{grid-template-columns:repeat(2,minmax(220px,1fr))}
  .books-projects{grid-template-columns:repeat(2,minmax(220px,1fr))}
}
@media(max-width:680px){
  .topbar{height:76px;padding:8px 16px}
  .brand img{width:58px;height:58px}
  .home{min-height:auto}
  .intro{padding:35px 18px 38px;min-height:46vh}
  .intro h1{font-size:clamp(43px,12.5vw,65px)}
  .category-grid{grid-template-columns:1fr;grid-template-rows:none}
  .category{min-height:245px;border-right:0!important;border-bottom:1px solid var(--line)!important}
  .category:last-child{border-bottom:0!important}
  .category-visual{min-height:105px}
  .panel-header{padding:16px}
  .panel-header>div{grid-template-columns:40px 1fr}
  .panel-header h2{font-size:clamp(31px,10vw,48px)}
  .close-panel{width:44px;height:44px;font-size:29px}
  .projects,.projects-five,.projects-two,.books-projects{
    display:grid;grid-template-columns:1fr;overflow:auto;padding:10px 14px 18px
  }
  .project-art{min-height:260px}
  .project-meta{min-height:76px}
  .utility-content{padding:28px 18px 40px}
  .utility-content p{font-size:clamp(36px,11vw,58px)}
}