/* TEC, the services constellation, drawn in code.

   All five domains, every node and every line the live tec.ltd draws, with
   the site's own colours in both modes. Rules and values are carried across
   from tec/deploy-2026-06-09-tec/index.html; that page writes every length
   in rem against html{font-size:max(17px,1.6190vw)}, and this plate cannot
   move the portfolio's root size, so each one is resolved at 17 px and
   written in px.

   The logo is the site's own: the navy square with the white lettering
   beside the stag. No display face is loaded and no display face is named,
   so nothing here can fall to Playfair.

   The plate stands complete with no scripting: every row is a details
   element, the first one open, and every node, line, label and subtitle is
   in the markup at its finished value. Script adds the one open row at a
   time behaviour, the draw on, and the mode toggle. */

.tecc{
  --white:#F8F6F1;
  --ink:#14130F;
  --muted:#6B6760;
  --blue:#1A3D8F;
  --hair:rgba(20,19,15,.14);
  --tint:rgba(20,19,15,.035);
  --conn:#14130F;
  --conn-op:.08;
  --conn-w:.75;
  --dot-glow:none;
  --crest:#1a1f5e;
  position:relative;
  background:var(--white);
  background-image:
    linear-gradient(rgba(20,19,15,0.012) 1px, transparent 1px),
    linear-gradient(90deg, rgba(20,19,15,0.012) 1px, transparent 1px);
  background-size:48px 48px;
  color:var(--ink);
  font-family:'EB Garamond',Georgia,serif;
  line-height:1.65;
  padding:clamp(18px,2.6vw,34px) clamp(16px,2.4vw,30px) clamp(10px,1.6vw,20px);
  overflow:hidden;
}
.tecc.is-dark{
  --white:#0c1026;
  --ink:#f4f0e6;
  --muted:#aaa18d;
  --blue:#cbb06a;
  --hair:rgba(233,228,214,.18);
  --tint:rgba(233,228,214,.05);
  --conn:#e8d08a;
  --conn-op:.55;
  --conn-w:1;
  --dot-glow:drop-shadow(0 0 3px rgba(240,217,143,.85));
  --crest:#ffffff;
  background-image:none;
}
.tecc-stars{ display:none; }
.tecc.is-dark .tecc-stars{
  display:block;
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:radial-gradient(120% 90% at 50% 12%, #0e1330 0%, #0c1026 48%, #0a0d20 100%);
}
.tecc > *{ position:relative; z-index:1; }

/* -- the bar: the logo at the left, the mode toggle at the right -------- */
.tecc-bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding-bottom:clamp(14px,2vw,24px);
}
.tecc-lockup{ display:flex; align-items:center; gap:10px; }
.tecc .tecc-square{ display:block; height:56px; width:56px; }
.tecc .tecc-crest{ display:block; height:56px; width:auto; }
.tecc-crest path{ fill:var(--crest); }
.tecc-toggle{
  background:none;
  border:0;
  padding:3px 4px;
  margin:0;
  cursor:pointer;
  color:var(--muted);
  line-height:0;
  display:none;
  opacity:.75;
  transition:opacity .2s;
  min-height:44px;
  min-width:44px;
  align-items:center;
  justify-content:center;
}
.m-js .tecc-toggle{ display:inline-flex; }
.tecc-toggle:hover{ opacity:1; }
.tecc-toggle svg{ width:18px; height:18px; display:block; }
.tecc-toggle .icon-moon{ display:none; }
.tecc.is-dark .tecc-toggle{ color:#cbb06a; }
.tecc.is-dark .tecc-toggle .icon-sun{ display:none; }
.tecc.is-dark .tecc-toggle .icon-moon{ display:block; }

/* -- the staircase ------------------------------------------------------ */
.tecc-rows{ padding-top:4px; }
.tecc-item{
  border-bottom:1px solid var(--hair);
  user-select:none;
}
.tecc-item:first-child{ border-top:1px solid var(--hair); }
.tecc-header{
  display:block;
  list-style:none;
  cursor:pointer;
  padding:22px 0 22px 18px;
  border-left:3px solid transparent;
}
.tecc-header::-webkit-details-marker{ display:none; }
.tecc-header:focus-visible{ outline:2px solid var(--blue); outline-offset:4px; }
.tecc-item[open] > .tecc-header{ background:var(--tint); }
.tecc-item[data-domain="sales"] > .tecc-header{ border-left-color:#1A3D8F; }
.tecc-item[data-domain="intelligence"] > .tecc-header{ border-left-color:#3D6B4F; }
.tecc-item[data-domain="operations"] > .tecc-header{ border-left-color:#A65D3F; }
.tecc-item[data-domain="workflow"] > .tecc-header{ border-left-color:#B59E5F; }
.tecc-item[data-domain="reporting"] > .tecc-header{ border-left-color:#722F37; }
.tecc-name{
  display:block;
  font-size:22px;
  text-transform:uppercase;
  letter-spacing:0.16em;
  color:var(--ink);
  line-height:1.2;
}
.tecc-name .fl{ font-size:34px; line-height:1; }
.tecc-name .rest{ font-size:15px; }
.tecc-desc{
  display:block;
  font-style:italic;
  font-size:14px;
  color:var(--muted);
  margin-top:2px;
}

/* -- the panel ---------------------------------------------------------- */
.tecc-panel{
  border-left:3px solid transparent;
  padding-left:18px;
  background:var(--tint);
}
.tecc-item[data-domain="sales"] .tecc-panel{ border-left-color:#1A3D8F; }
.tecc-item[data-domain="intelligence"] .tecc-panel{ border-left-color:#3D6B4F; }
.tecc-item[data-domain="operations"] .tecc-panel{ border-left-color:#A65D3F; }
.tecc-item[data-domain="workflow"] .tecc-panel{ border-left-color:#B59E5F; }
.tecc-item[data-domain="reporting"] .tecc-panel{ border-left-color:#722F37; }
.tecc-svg{ width:100%; height:380px; display:block; }
.service-label{
  font-family:'EB Garamond',Georgia,serif;
  font-size:13px;
  fill:var(--ink);
  opacity:1;
}
.service-label .fl{ font-size:130%; }
.service-subtitle{
  font-family:'EB Garamond',Georgia,serif;
  font-style:italic;
  font-size:11px;
  fill:var(--muted);
  opacity:.7;
}
.connector-line{
  stroke:var(--conn);
  stroke-width:var(--conn-w);
  fill:none;
  opacity:var(--conn-op);
}
.tecc-svg circle{ filter:var(--dot-glow); }
.tecc.is-dark .tecc-svg circle{ fill:#f0d98f!important; }

/* the readable list the site prints under the star art on a phone */
.tecc-list{ list-style:none; margin:4px 0 18px; padding:0; display:none; }
.tecc-list li{
  display:flex;
  gap:11px;
  align-items:flex-start;
  padding:9px 2px;
  border-top:1px solid var(--hair);
}
.tecc-list li:first-child{ border-top:none; }
.sl-dot{
  flex:0 0 auto;
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--blue);
  margin-top:7px;
}
.tecc.is-dark .sl-dot{ background:#f0d98f; box-shadow:0 0 5px rgba(240,217,143,.85); }
.sl-txt{ display:flex; flex-direction:column; gap:2px; }
.sl-name{ font-size:18px; letter-spacing:.01em; color:var(--ink); }
.sl-desc{ font-style:italic; font-size:15px; line-height:1.4; color:var(--muted); }

/* -- the draw on, gated the way the site gates it ---------------------- */
.m-js .tecc-item[open] .connector-line{
  animation:tecc-draw .4s ease var(--d,0s) backwards;
}
.m-js .tecc-item[open] .tecc-svg circle{
  animation:tecc-dot .3s ease var(--d,0s) backwards;
}
.m-js .tecc-item[open] .service-label{
  animation:tecc-fade .35s ease var(--d,0s) backwards;
}
.m-js .tecc-item[open] .service-subtitle{
  animation:tecc-fade-sub .35s ease var(--d,0s) backwards;
}
@keyframes tecc-draw{ from{ stroke-dashoffset:var(--line-length); } }
@keyframes tecc-dot{ from{ r:0; opacity:0; } }
@keyframes tecc-fade{ from{ opacity:0; } }
@keyframes tecc-fade-sub{ from{ opacity:0; } }

/* -- the phone branch the site takes at 720: star art, then the list ---- */
@media (max-width:720px){
  .tecc-svg{ height:170px; margin:6px auto 4px; }
  .connector-line{ stroke-width:2.4; }
  .tecc-svg .service-label,
  .tecc-svg .service-subtitle{ display:none; }
  .tecc-svg circle{ r:5; }
  .tecc-list{ display:block; }
  .tecc-header{ padding:14px 0 14px 14px; }
  .tecc-name{ font-size:19px; }
  .tecc-name .fl{ font-size:26px; }
  .tecc .tecc-square,.tecc .tecc-crest{ height:44px; }
  .tecc .tecc-square{ width:44px; }
}

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